Datalazyload

1,224 views

Published on

Published in: Education, Business, Technology
  • Be the first to comment

Datalazyload

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

×