本站前端需求:

首页缩略图采用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');
});