图片延迟加载

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2011-6-16,#,图片延迟加载,效果预览,1,、节省资源,1,、减少图片下载量，减轻服务器的负荷,2,、加快浏览速度，更快的显示网页上其他元素,图片延迟加载,好处,将所有的图片的,src,值放入到一个新建的,_src,属性中，当图片处于浏览器的显示区域时，再把,_src,赋给,src,。图片只有在显示区域的时候才会被加载。,图片延迟加载,-,实现原理,1,、筛选出需要延迟加载的图片，只把有,_src,属性的图片存起来（,aLazyImg,）并存储,_src,的值（,aSrc,）；,var aAllImg=obj.getElementsByTagName(img);,var aLazyImg=;,var aSrc=;,for(var i=0;iaAllImg.length;i+),if(attr(aAllImgi,lazysrc),aLazyImg.push(aAllImgi);,aSrc.push(attr(aAllImgi,lazysrc);,图片延迟加载,步骤,2,、获取图片的位置,获取图片位置（,offsetTop|offsetLeft,不断累加）,function getPosition(obj),var oEle=obj;,var oPos=;,oPos.left=0;,oPos.top=0;,while(obj.offsetParent),oPos.left+=obj.offsetTop;,oPos.top+=obj.offsetTop;,obj=obj.offsetParent;,return oPos;,图片延迟加载,步骤,3,、判断是图片否在可视区域,图片延迟加载,步骤,4,、如果图片在可视区域并且没有,src,属性：,设置,src,属性的值为,_src,移除,_src,属性,5,、当所有图片加载完成时解除函数,图片延迟加载,步骤,试验效果,第一屏加载,1,、页面中没有真正的,src,属性，不支持,js,的时候图片不能显示,2,、被隐藏掉的图片（,display:none,）无法计算位置，当图片显示的时候需要重新调用函数,图片延迟加载,缺陷,