您的位置：首页 > 运维架构 > 网站架构

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

2014-03-13 17:27 519 查看
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 美女图片网
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航