关于图片懒加载（转）

当我们打开一个页面时，浏览器就会从上往下读取页面中的<img>标签src中的地址，并且开启线程来进行加载。

倘若用户的网速不给力或者此页面中的图片太多时，就会发生每张图片都加载了一点但是都没有加载完成，导致最后没有一个图片能正常显示。一方面让用户的体验非常之差，试问谁会一直耐心的等待着页面的加载？另一方面，加载每个图片都要向服务器发送请求，这会增大服务器的压力。

针对这种情况，就需要运用懒加载技术：先只加载可视窗口区域的图片，当用户向下拖动滚动条时再继续加载后面的图片（也是只加载目前可视窗口区域内的图片）。1.这样减少了加载时的线程数量，使可视区域内的图片也能够快速加载，优化了用户体验。2.减少了同一时间发向服务器的请求数，服务器压力剧减。

那么我们是如何进行懒加载的呢？

我所使用的方法：在写网页<img>标签时并不会将图片的路径放入src属性。而是自定义一个其他的属性eg：_src。将路径放入这个自定义的属性中。那么在加载页面时，这个图片一开始是无法加载的。而当浏览器的可视区域移动到此图片上时，将_src中的路径赋值给src属性，并开始加载。

HTML 约定

我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。

代码如下：

function getFixed(obj){
　　//获取非行间属性
　　function getStyle(obj,styleName){
　　　　if (obj.currentStyle){
　　　　　　return obj.currentStyle[styleName];//ie下获取某个元素的样式
　　　　}
　　　　else{
　　　　　　return getComputedStyle(obj,null)[styleName];//chrom下获取某个元素的样式
　　　　}
　　}
　　//要获取图片相对网页顶部的距离，但图片有被定位的父级
　　var iLeft=0; 
　　var iTop=0;
　　var oParent=obj;
　　while(oParent){//循环
　　　　if (oParent.tagName=="HTML"){//一直到当前元素的父为html停止循环
　　　　　　break;
　　　　}
　　　　iLeft+=oParent.offsetLeft;//计算图片基于父元素的左边位移，
　　　　iTop+=oParent.offsetTop;//计算图片基于父元素的顶部位移
　　　　if (oParent!=obj){
　　　　　　iLeft+=parseInt(getStyle(oParent,"borderWidth"));//offsetLeft不包括边框，因此要把边框加上
　　　　　　iTop+=parseInt(getStyle(oParent,"borderWidth"));
　　　　}
　　　　oParent=oParent.offsetParent;//让当前元素等于他的已经被定为的父级元素，然后继续开始循环。，从而让循环开始，计算出图片基于html根元素的位移距离。
　　}
　　return [iLeft,iTop];//当 break 后itop就是图片相对网页顶部的距离
}
window.onload=window.onscroll=function (){

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

　　var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
　　var scrollBottom=bodyScrollTop+document.documentElement.clientHeight;
　　for (var i=0; i<aImg.length; i++){
　　　　if (getFixed(aImg[i])[1]<=scrollBottom){//此时说明这图片已经在可视区域内，应该开始加载了
　　　　　　aImg[i].src=aImg[i].getAttribute("_src");
　　　　}
　　}
}