关于图片预加载loading及加载失败的相关问题

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');});
}