• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Datalazyload
 

Datalazyload

on

  • 1,179 views

 

Statistics

Views

Total Views
1,179
Views on SlideShare
1,013
Embed Views
166

Actions

Likes
1
Downloads
1
Comments
0

2 Embeds 166

http://wd.alibaba-inc.com 105
http://fd.aliued.cn 61

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Datalazyload Datalazyload Presentation Transcript

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