jquery圖片載入失敗

阿新 • • 發佈：2019-02-01

JavaScript判斷遠端圖片是否存在,載入完成:onerror 屬性- & jQuery實現（如果因為網路或圖片的原因發生異常，則顯示該圖片）~

</head><body><p>判斷百度的LOGO是否存在：<br><IMG src="http://www.baidu.com/img/baidu_logo.gif" onerror="javascript:this.src="http://endual.iteye.com/images/logo.jpg" rel="nofollow"/>></p><p>如果不存在，則替換成本地網站logo：<br><IMG src="http://www.baidu.com/img/baidu_logo11.gif" onerror="javascript:this.src="http://endual.iteye.com/images/logo.gif" rel="nofollow"/>></p></body></html>

1234567

根據此屬性用js建立影象物件：

格式：

影象物件名稱=new Image([寬度],[高度])

影象物件的屬性：

border complete height hspace lowsrc name src vspace width readyState

影象物件的事件：

onabort onerror onkeydown onkeypress onkeyup onload onreadystatechange

程式程式碼

var img=new Image();

img.onload=function(){alert("img is loaded")}; //它在影象完全載入到記憶體之後呼叫。

img.onerror=function(){alert("error!")};//它在影象載入失敗後呼叫，影象載入失敗不會呼叫onload事件。

img.src="http://endual.iteye.com/blog/image1.jpg" rel="nofollow"/>

function show(){alert("body is loaded");};

window.onload=show;

執行上面的程式碼後，在不同的瀏覽器中進行測試，發現IE和FF是有區別的，在FF中，img物件的載入包含在body的載入過程中，既是img載入完之後，body才算是載入完畢，觸發window.onload事件。

在IE中，img物件的載入是不包含在body的載入過程之中的，body載入完畢，window.onload事件觸發時，img物件可能還未載入結束，img.onload事件會在window.onload之後觸發。

根據上面的問題，考慮到瀏覽器的相容性和網頁的載入時間，儘量不要在Image物件裡放置過多的圖片，否則在FF下會影響網頁的下載速度。當然如果你在 window.onload之後，執行預載入函式，就不會FF中的問題了。

對於onload事件的繫結，不要放在src="http://endual.iteye.com/blog/’……’語句後面，因為載入圖片的速度可能很快，如果圖片載入完畢後，繫結onload事件的程式碼還沒來得及執行，就會造成繫結到onload事件的函式沒機會執行。其他事件的繫結也要注意這一點。

程式碼簡化後如下：

var img = new Image();
img.src="http://endual.iteye.com/blog/“test.gif”;

簡單看過以後貌似這段程式碼沒有什麼問題，可是IE下就不是能正常的執行。不管怎麼檢測，IE根本不會理會，不過還是找到了解決的方法，原理如下：
圖片下載時，瀏覽器會把圖片快取起來，再次載入此圖片時就會從緩衝區里加載。
那麼如果圖片已經在快取區了，是不是從緩衝區里加載的圖片就不觸發onload事件呢？
測試……

var img = new Image();
img.onload = function(){
alert(this.src);
//other
};
img.src="http://endual.iteye.com/blog/“test.gif”;

測試成功！

結論：應該把onload寫到src前面，先告訴瀏覽器圖片載入完要怎麼處理，再讓它去載入圖片。所以，不是IE瀏覽器不會觸發onload事件，而是因為載入緩衝區的速度太快，在沒有告訴它載入完要怎麼辦時，它已經載入完了。反過來說，firefox明顯更智慧一些，加入onload事件後，firefox瀏覽器會檢測緩衝區是否已經有此圖片，有的話直接就觸發此事件！

img 判斷圖片載入完成：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 //EN"> <html><head></head><body><script> //判斷瀏覽器var Browser=new Object(); Browser.userAgent=window.navigator.userAgent.toLowerCase();Browser.ie=/msie/.test(Browser.userAgent);Browser.Moz=/gecko/.test(Browser.userAgent); //判斷是否載入完成function Imagess(url,imgid,callback){        var val=url;     var img=new Image();     if(Browser.ie){        img.onreadystatechange =function(){              if(img.readyState=="complete"||img.readyState=="loaded"){                callback(img,imgid);            }        }           }else if(Browser.Moz){         img.onload=function(){            if(img.complete==true){                callback(img,imgid);            }        }           }       //如果因為網路或圖片的原因發生異常，則顯示該圖片    img.onerror=function(){img.src="http://www.baidu.com/img/baidu_logo.gif" rel="nofollow"/>    img.src="http://endual.iteye.com/blog/val;" rel="nofollow"/>} //顯示圖片function checkimg(obj,imgid){ document.getElementById(imgid).src="http://endual.iteye.com/blog/obj.src;" rel="nofollow"/>}//初始化需要顯示的圖片，並且指定顯示的位置window.onload=function(){    Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img1",checkimg);    Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img2",checkimg);    Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img3",checkimg);    Imagess("http://pic.cnblogs.com/avatar/a46603.jpg","img4",checkimg);    Imagess("http://pic.cnblogs.com/avatar/a46603.jpgdddddddddddddddddddddddd","img5",checkimg);}</script><img id="img1" src="loading.gif" width="100" height="100" /><img id="img2" src="loading.gif" width="100" height="100" /><img id="img3" src="loading.gif" width="100" height="100" /><img id="img4" src="loading.gif" width="100" height="100" /><img id="img5" src="loading.gif" width="100" height="100" /></body></html>

jQuery實現：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head>    <title>無標題頁</title>    <script language="javascript" type="text/javascript" src="http://www.mainaer.com/JS/jquery-1-3-2.js"></script></head><body>  <div><img src="http://www.mainaer.com/skin/maps/4.png" /><img src="http://www.mainaer.com/skin/maps/5_R.png" /><img src="http://www.mainaer.com/skin/maps/6.png" /><img src="http://www.mainaer.com/skin/maps/7.png" /><img src="http://www.mainaer.com/skin/maps/8.png" /></div><div id="msgTool"> </div> <script language="javascript" type="text/javascript">           $(function (){                 $("img").each(function (i,e){              var imgsrc="http://endual.iteye.com/blog/$(e).attr(" rel="nofollow"/>              $(e).load(function(){                   $("<p> ok "+ $(e).width()+":"+$(e).height()+"</p>").appendTo("#msgTool");                }).error(function() {                   $("<p> error "+ imgsrc +"</p>").appendTo("#msgTool");                   $(e).attr("src","http://www.mainaer.com/uploadfiles/mainaer/nopic.gif");                }) ;                    });      });             </script></body></html>

jquery圖片載入失敗

JavaScript判斷遠端圖片是否存在,載入完成:onerror 屬性- & jQuery實現（如果因為網路或圖片的原因發生異常，則顯示該圖片）~

jquery圖片載入失敗

JQuery Mobile - 處理圖片載入失敗！

swiper縮圖報錯，動態獲取圖片載入失敗

img圖片載入失敗用預設圖片代替

Glide在RecyclerView中部分圖片載入失敗的問題

當原圖片載入失敗時，如何讓圖片載入上我們預設給的圖片

js 圖片載入失敗處理方法

vue命令:onerror設定<img>載入失敗的預設圖片

pycharm中django匯入jquery載入失敗

vue命令:onerror設定載入失敗的預設圖片

Android Https網路連線失敗，圖片載入不出

樣式化載入失敗的圖片

jQuery的js檔案載入失敗的原因

jQuery圖片延遲載入

使用jquery.lazyload.js圖片預載入（懶載入）遇到的問題，圖片載入不出來

jQuery圖片延遲載入外掛jQuery.lazyload外掛使用說明

懶載入之jQuery圖片延遲載入外掛jQuery.lazyload

vue打包後圖片資源background引入路徑載入失敗

jQuery圖片切換插件jquery.cycle.js

Jquery 圖片延遲加載技術

jquery圖片載入失敗

JavaScript判斷遠端圖片是否存在,載入完成:onerror 屬性- & jQuery實現（如果因為網路或圖片的原因發生異常，則顯示該圖片）~

相關推薦