本站前端需求:
首页缩略图采用background-image方式,文章内容图采用img标签,边栏sidebar中的热评文章采用bg方式;因此需要实现img和div的lazyload。边栏采用fixed定位且显示时body不可滚动。
代码如下:
//独立定义一个lazyload函数
function lazyLoad(lazy) {
var screenH = window.innerHeight;
var scroH = $(this).scrollTop();
$(lazy).each(function(){
var myh = $(this).offset().top;
if(scroH + screenH > myh){
src = $(this).attr('data-original');
if ($(this).is('img')) {
$(this).attr('src', src);
} else {
$(this).css('background-image', 'url(' + src + ')');
}
$(this).removeClass('lazy');
};
});
}
滚动事件调用lazyload
$(function(){
// 网页加载时先执行一次,否则页面滚动前可视图片不显示
lazyLoad('.post-list .lazy');
//滚动条事件
$(window).scroll(function(){
lazyLoad('.post-list .lazy');
});
//侧边栏的滚动事件
$("#sidebar").scroll(function(){
lazyLoad('.sidebar .lazy');
});
})
因为本站采用了pjax方案,因此需要回调:
lazyLoad('.post-list .lazy');
$("#sidebar").scroll(function(){
lazyLoad('.sidebar .lazy');
});
已有0 条评论