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

最近自己做了一个个人网站 茶余饭后网 http://www.cyfhw.top。

在做页面优化时，首先是 js 异步加载。其次就是 图片异步加载。

关于页面优化 可以看：雅虎网站页面性能优化的34条黄金守则http://blog.csdn.net/hch126163/article/details/5966021

做图片异步加载时，我第一次用了最简单的方法。

直接后台 修改 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。