Download - Datalazyload
Transcript
![Page 1: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/1.jpg)
资源懒加载组件
datalazyload
![Page 2: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/2.jpg)
![Page 3: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/3.jpg)
约定格式• 图片:
<img src="http://img.china.alibaba.com/cms/upload/other/lazyload.png" data-lazyload-src="http://fd.aliued.cn/i/300-300.png" alt=""/>
![Page 4: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/4.jpg)
• HTML内容块:
<div class="lazyload-textarea"> <textarea style="display: none;">测试 </textarea> </div>
![Page 5: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/5.jpg)
• 函数:
<a class="lazyload-fn" data-lazyload-fn-body="FE.test.log" title="阿里巴巴 " href="#">阿里巴巴 </a>
![Page 6: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/6.jpg)
性能提升点• 资源加载完毕后解除所有绑定事件• 使用函数节流,合理的减少函数执行次数
![Page 7: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/7.jpg)
提供的接口
![Page 8: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/8.jpg)
使用方式datalazyload.register({
containers : [$('#doc')]});datalazyload.add($(‘#testContainer’));datalazyload.bind($(‘#fnBindTest’),function(el){
alert(‘test’);});
![Page 9: Datalazyload](https://reader036.vdocuments.mx/reader036/viewer/2022082704/55892da8d8b42a31388b4623/html5/thumbnails/9.jpg)
使用注意点• 资源容器定宽高• 首屏资源• 多用 bind方法