为网站图片增加延迟加载功能,提升用户体验

http://mslog.sinaapp.com/archives/33

今天在博客园看了一位哥的按需加载图片博客,将代码做成一个函数封装下,直接拿来主义用在我的站上,

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var fn  =  function ( ) {     $ ( "img" ). each ( function ( )  { //遍历所有图片          var othis  = $ ( this ) , //当前图片对象             top  = othis. offset ( ). top  - $ (window ). scrollTop ( ) ; //计算图片top - 滚动条top          if  (top  > $ (window ). height ( ) )  { //如果该图片不可见              return ; //不管          }  else  {             othis. attr ( 'src' , othis. attr ( 'data-src' ) ). removeAttr ( 'data-src' ) ; //可见的时候把占位值替换 并删除占位属性          }      } ) ; } function lazy_load_img ( ) {     fn ( ) ;     $ (window ). scroll (fn ). resize (fn ) ; //绑定事件 }

大家可以看看真实效果
138mm美女图片网

来张截屏欣赏

138mm.com 美女图片网