首頁 > web前端 > js教程 > 主體

jquery給img綁定error事件的問題解決

黄舟
發布: 2017-06-27 11:23:01
原創
2452 人瀏覽過

如:

<img src = &#39;xxxx.jpg&#39; >

$(&#39;img&#39;).error(function(){
    $(this).attr(&#39;src&#39;,"默认图片");
})
登入後複製

經過測試發現,如果原始圖片不存在的話,頁面上的圖片就會一直閃爍,如何解決這個問題?

$(window).load(function() { 
  $(&#39;img&#39;).each(function() {    if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
      this.src = &#39;http://www.tranism.com/weblog/images/broken.gif&#39;; 
      } 
   });
});
登入後複製

沒太懂,原始圖片是指xxxx.jpg嗎?你這個程式碼如果預設圖片路徑也是錯誤的話(也就是預設圖片也不存在)就進入死循環了,所以一直閃啊閃,因為不斷的onerror

先檢查圖片是否載入成功,然後如果失敗的話再綁定事件。而且替換一次就好了。

<img src="xxxx.jpg" alt="" /><script>jQuery(document).ready(function(){
    jQuery(&#39;img&#39;).each(function(){        var error = false;        if (!this.complete) {
            error = true;
        }        if (typeof this.naturalWidth != "undefined" && this.naturalWidth == 0) {
            error = true;
        }        if(error){
            $(this).bind(&#39;error.replaceSrc&#39;,function(){                this.src = "default_image_here.png";

                $(this).unbind(&#39;error.replaceSrc&#39;);
            }).trigger(&#39;load&#39;);
        }
    });
});</script>
登入後複製

以上是jquery給img綁定error事件的問題解決的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板