纯js 图片异步加载原理及实现

最近自己做了一个个人网站 茶余饭后网 http://www.cyfhw.top。 在做页面优化时，首先是 js 异步加载。其次就是 图片异步加载。关于页面优化 可以看：雅虎网站页面性能优化的34条黄金守则/article/8817134.html做图片异步加载时，我第一次用了最简单的方法。直接后台 修改 img src 属性为 data-src 属性。浏览器不认识 data-src ，页面加载时，浏览器就不会去加载图片。js 修改 img data-src 属性为 src，此时 浏览器 就会去下载图片了。 图片异步加载，完美实现，测试也没什么问题。js 代码如下：

var imgs = document.getElementsByTagName("img");
for(var i=0,l=imgs.length;i<l;i++){
var url = imgs[i].getAttribute("data-src");
if(!imgs[i].src && url){
imgs[i].src = url;
}
}

这个代码用了一段时间，也没发现什么问题。我个人认为，一个页面图片不多【小于20张】的情况下，这样的方式异步加载完全没有问题！

后来，我的网站有些文章图片特别多，比如：家庭生活 潮流前线 人在旅途 体育生活 这些栏目

图片多了，原来的逻辑可能存在的问题：

1、网络卡的情况，浏览器多线程去请求过多的图片，可能会导致一些图片请求超时，哪一张图片先加载完，也不能确定，可能可见区域的图片没有加载完成，而不可见的区域图片却加载了。

2、访问打开网页，不一定完全看完这篇文章，如果打开网页，就加载所有图片，也会增加我们服务器的负载。回增加客户端的请求数，浏览器垃圾更多，流量更多【手机非wifi 情况下，就很重要】。

改进代码，可见区域的图片，才加载。不可见的不加载，用户，滚动滚动条时，出现在滚动区域的图片，异步加载。

我的网站只有垂直滚动条，没有水平滚动条，所以只考虑了垂直方向的逻辑。

var imgs = document.getElementsByTagName("img");

bindEvent(window,'scroll',lazyload);lazyload();function lazyload(){forEach(imgs,function(img,i){if(!img || img.src ){return;}var t = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop ;var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;var ot=getAbsPoint(img).y;if( h+t<ot || t>ot+img.offsetHeight)

	{return;}var url = img.getAttribute("data-src");if(!img.src && url){img.src = url;}});}

function getAbsPoint(o) {var x = o.offsetLeft;var y = o.offsetTop;while (o = o.offsetParent) {x += o.offsetLeft;y += o.offsetTop}return {'x': x,'y': y};}

function bindEvent(obj,evt,fun){if(window.addEventListener){obj.addEventListener(evt, function(e){ fun(e);},false);}else{obj.attachEvent('on'+evt,fun);}}

function forEach (array, callback, thisObject) {if (array.forEach) {array.forEach(callback, thisObject)} else {for (var i = 0, len = array.length; i < len; i++) {callback.call(thisObject, array[i], i, array)}}};

效果可以看 茶余饭后网 http://www.cyfhw.top。[/code]