Your SlideShare is downloading. ×
Img lazy-load
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Img lazy-load

1,334
views

Published on

image-lazy-load

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