1.為什么網(wǎng)頁需要loading

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

2.img加載失敗后，如何顯示默認(rèn)圖片

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

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

(function(){})()

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

4.如果頁面用的不是<img>標(biāo)簽，而是背景圖片如何顯示默認(rèn)圖片

<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();//創(chuàng)建一個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標(biāo)簽設(shè)置loading圖片if (z.parentNode.getElementsByClassName("js-loading").length>0) {z.src = 'loading圖片地址';} else {z.src = 'loading圖片地址'}
} else {//背景圖片設(shè)置loading圖片z.style.backgroundImage = 'url(loading圖片地址)'
}

5.img.onerror = null的作用

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

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

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

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

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

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

8.img標(biāo)簽的onerror事件方法在火狐中不會觸發(fā)

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

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

//針對img標(biāo)簽
<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');});
}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。