Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
997
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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