图片延迟加载.pptx

《图片延迟加载.pptx》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、图片延迟加载效果预览1、节省资源1、减少图片下载量，减轻服务器的负荷2、加快浏览速度，更快的显示网页上其他元素图片延迟加载——好处将所有的图片的src值放入到一个新建的_src属性中，当图片处于浏览器的显示区域时，再把_src赋给src。图片只有在显示区域的时候才会被加载。图片延迟加载--实现原理1、筛选出需要延迟加载的图片，只把有_src属性的图片存起来（aLazyImg）并存储_src的值（aSrc）；varaAllImg=obj.getElementsByTagName('img');varaLazyImg=[];varaSrc=[];for(vari=0;i

2、g.length;i++){if(attr(aAllImg[i],lazysrc)){aLazyImg.push(aAllImg[i]);aSrc.push(attr(aAllImg[i],lazysrc));}}图片延迟加载—步骤2、获取图片的位置获取图片位置（offsetTop

3、

4、offsetLeft不断累加）functiongetPosition(obj){varoEle=obj;varoPos={};oPos.left=0;oPos.top=0;while(obj.offsetParent){oPos.left+=obj.offsetTop;oPos.top+=obj.o

5、ffsetTop;obj=obj.offsetParent;}returnoPos;}图片延迟加载—步骤3、判断是图片否在可视区域图片延迟加载—步骤4、如果图片在可视区域并且没有src属性：设置src属性的值为_src移除_src属性5、当所有图片加载完成时解除函数图片延迟加载—步骤试验效果——第一屏加载1、页面中没有真正的src属性，不支持js的时候图片不能显示2、被隐藏掉的图片（display:none）无法计算位置，当图片显示的时候需要重新调用函数图片延迟加载——缺陷