1.為什么網頁需要loading

這是因為頁面的加載是需要時間的，如果頁面加載很快，loading的作用可能還不是特別能夠體現，但是如果當頁面加載速度不是很快甚至很慢的時候，頁面就會出現白屏的狀況，如果沒有使用loading來和用戶進行交互，用戶并不知道應用到底是出現什么問題（卡死、出錯或者在加載）那么就會十分的影響用戶體驗，頁面加載所需要時間越長，那么可能損失的用戶量就會多。所以在恰當的時候使用loading是解決網頁加載緩慢時與用戶交互的最好解決方案。

2.img加載失敗后，如何顯示默認圖片

<img src="www.baidu.com/1.jpg" />
jQuery('img').error(function(){jQuery(this).each(function(){jQuery(this).attr('src','www.baidu.com/default.jpg')//加載失敗后顯示默認圖片});
});

3.(function(){})();——javascript中的自執行匿名函數

(function(){})()

• 紅色括號相當于把函數定義變成表達式，起到自執行的作用。
  類似的如：～function(){}(); ！function(){}(); +function(){}(); -function(){}();
  -綠色括號相當于函數調用，傳遞參數。

4.如果頁面用的不是<img>標簽，而是背景圖片如何顯示默認圖片

<a class="js-prd-bg-img" style="background-image: url('')" initImg="真實圖片地址" href="/product/product_id" target="_blank"></a>
<img class="js-prd-bg-img js-loading"  initImg="真實圖片地址" href="/product/product_id"  src=""/>function f(t) {if (t) {if (t.tagName == "IMG") {t.onerror = function() {t.src = '暫無圖片url';this.onerror = null};t.src = t.getAttribute("initImg")} else {var img = new Image();//創建一個image對象img.onload = function() {t.style.backgroundImage = "url('" + this.src + "')";img.onload = null};img.onerror = function() {t.style.backgroundImage = 'url(暫無圖片url)';img.onerror = null};img.src = t.getAttribute("initImg")}t.removeAttribute("initImg");x--}
}if (z.tagName == "IMG") {//img標簽設置loading圖片if (z.parentNode.getElementsByClassName("js-loading").length>0) {z.src = 'loading圖片地址';} else {z.src = 'loading圖片地址'}
} else {//背景圖片設置loading圖片z.style.backgroundImage = 'url(loading圖片地址)'
}

5.img.onerror = null的作用

當圖片加載失敗的時候，我們可以利用onerror事件賦予它默認圖片，但是問題來了，假如默認圖片又不存在呢，即加載失敗，這個時候就會陷入死循環。
為了避免死循環的情況，我們可以在執行完onerror事件后，置于οnerrοr=null 來清除onerror事件

6.img的src屬性為什么要寫在onload之后？

js內部是按順序逐行執行的，可以認為是同步的
給image賦值src時，去加載圖片這個過程是異步的，這個異步過程完成后，如果有onload，則執行onload

如果先賦值src，那么這個異步過程可能在你賦值onload之前就完成了（比如圖片緩存，或者是js由于某些原因被阻塞了），那么onload就不會執行
反之，js同步執行確定onload賦值完成后才會賦值src,可以保證這個異步過程在onload賦值完成后才開始進行，也就保證了onload一定會被執行到

7.js判斷背景圖片是否加載成功？

非背景圖片時我們可以使用img的onerror來判斷，但是背景圖片我們就需要用img的onload進行預加載。

8.img標簽的onerror事件方法在火狐中不會觸發

9. 新的解決思路是使用imagesloaded.js

• jQuery(prdImgListObj).imagesLoaded()imagesLoaded之前的prdImgListObj最好是最精確的范圍，否則后續會將這個范圍內的所有圖片都拿過來，導致程序運行錯誤。
• 加js-img-loading，主要是因為mobile是往下滑動再加載下一頁數據的，若不加，js執行的數據會越來越多，導致加載速度延遲。

//針對img標簽
<img class="image js-img-loading" src="loading圖片地址" initSrc="真實圖片地址" >replaceEmptyImg('#ajax_brand_list .images','238X271');function replaceEmptyImg(prdImgListObj,imgElemObj,size){
jQuery(prdImgListObj+' '+imgElemObj).imagesLoaded().progress(function(instance, image){if(image.isLoaded){image.img.src = jQuery(image.img).attr('initSrc');}image.img.onerror = function(){image.img.src =  'http://暫無圖片地址/'+size+'.jpg';this.onerror = null;}});jQuery(image.img).removeAttr(initSrc);jQuery(image.img).removeClass('js-img-loading');
}

//針對background-image
<div class="pic js-img-loading" style="background-image:url('loading圖片地址'), url('真實圖片地址');" onclick="showPage('/product/prd_cd');"></div>replaceEmptyImgBg('#ajax_product_list','.js-img-loading','238X271')function replaceEmptyImgBg(prdImgListObj,imgElemObj,size){var loadingImagePath = 'http://loadng圖片地址/'+size+'.gif';jQuery(prdImgListObj).imagesLoaded({ background: imgElemObj }).progress(function(instance, image) {if(!image.isLoaded){image.url = 'http://暫無圖片地址/'+size+'.jpg';}if(image.url !== loadingImagePath) {image.element.style.backgroundImage = 'url(' + image.url + ')';}jQuery(imgElemObj).removeClass('js-img-loading');});
}

總結

以上是生活随笔為你收集整理的关于图片预加载loading及加载失败的相关问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。