最近自己做了一个个人网站 茶余饭后网 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;ivar url = imgs[i].getAttribute("data-src"); if(!imgs[i].src && url){ imgs[i].src = url; } }
这个代码用了一段时间,也没发现什么问题。我个人认为,一个页面图片不多【小于20张】的情况下,这样的方式异步加载完全没有问题!
后来,我的网站有些文章图片特别多,比如:家庭生活 潮流前线 人在旅途 体育生活 这些栏目
图片多了,原来的逻辑可能存在的问题:
1、网络卡的情况,浏览器多线程去请求过多的图片,可能会导致一些图片请求超时,哪一张图片先加载完,也不能确定,可能可见区域的图片没有加载完成,而不可见的区域图片却加载了。
2、访问打开网页,不一定完全看完这篇文章,如果打开网页,就加载所有图片,也会增加我们服务器的负载。回增加客户端的请求数,浏览器垃圾更多,流量更多【手机非wifi 情况下,就很重要】。
改进代码,可见区域的图片,才加载。不可见的不加载,用户,滚动滚动条时,出现在滚动区域的图片,异步加载。
我的网站只有垂直滚动条,没有水平滚动条,所以只考虑了垂直方向的逻辑。
var imgs = document.getElementsByTagName("img");
{ 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。