Img lazy-load

1,555 views

Published on

image-lazy-load

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,555
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Img lazy-load

  1. 1. Img-lazy-load<br />钨龙<br />2010-9-20<br />
  2. 2.
  3. 3. Problom<br />首屏以外的图片 “被提前” 加载<br />页面初始化速度慢.<br />首屏跳转用户造成了流量的浪费.<br />Javascript “被延后”加载<br />依赖Js的组件功能不可用<br />
  4. 4. 延迟加载<br />lazyLoad<br />
  5. 5. <imgsrc="1.jpg" style="display: none" /><br />只有Opera不产生请求。<br />
  6. 6. <imgsrc="1.jpg" style="visibility:hidden" /><br />Opera也会产生请求。<br />
  7. 7. <imgsrc="" /><br />ie会发送空请求<br />Safari/Chrome 会产生当前页面请求<br />Opera/Firefox 不会产生请求<br />
  8. 8. 取消加载<br />removeAttributeSrc ?<br />
  9. 9. IE不减反增<br />
  10. 10. Webkit无法取消正在加载的图片<br />https://bugs.webkit.org/show_bug.cgi?id=6656<br />
  11. 11. Opera / Firefox 相对完美<br />
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16. Future<br />K2 UI组件 依赖 img-lazy-load<br />可绑定事件<br />寻找更好的placeholder的方案<br />根据时间延迟加载(待定)<br />数据(html+img)延迟加载<br />
  17. 17. Resouce<br />http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-destroy-your-site/<br />http://www.appelsiini.net/projects/lazyload jQueryLazyload/<br />http://www.dynamixlabs.com/2008/01/17/a-quick-look-add-a-loading-icon-to-your-larger-images/<br />http://davidwalsh.name/lazyload MooTools/<br />
  18. 18. 3Q~<br />http://work.koubei-inc.com/projects/k2-data-lazy-load/<br />

×