1、图片延迟加载,效果预览,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;iaA
2、llImg.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）无法计算位置，当图片显示的时候需要重新调用函数,图片延迟加载缺陷,
