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

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 美女图片网