多数纯js替代框架的方案都比较复杂，这个方案，或者说lazyload的实现方案中，js原生实现是兼具轻量与便捷的。
以前在网上参考过实现过程，后面自己尝试写了下，越发觉得需求不多的情况下，纯js较框架更加精炼有美感。

js实现lazyload

选定懒加载图片

var imgs = document.querySelectorAll('.item img');

基础函数getTop

function getTop(e) {
    var T = e.offsetTop;
    while(e = e.offsetParent) {
        T += e.offsetTop;
    }
    return T;
}

lazyLoad主体函数

function lazyLoad(imgs) {
    var H = window.innerHeight;//获取当前显示窗高度
    var S = document.documentElement.scrollTop || document.body.scrollTop;
    for (var i = 0; i < imgs.length; i++) { //循环执行所有选定图片
        if (H + S > getTop(imgs[i])) { 
            //判断图片是否到达可视区域，这一步完全可以设置一个提前缓冲，减少用户感知
            //（感觉不到技术才是最好的技术）
        imgs[i].src = imgs[i].getAttribute('data-src');
            //图片满足可视条件，用data-src属性值（真实图片地址）代替默认图片,显示图片
        }
    }
}

下面是有点技术含量的部分

需要写一个简单的节流函数，不然会因为判断scroll造成极大运算浪费

function throttle(func, wait, mustRun) {
    var timeout,
        startTime = new Date();
 
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
 
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔，触发 handler
        if(curTime - startTime >= mustRun){
            func.apply(context,args);
            startTime = curTime;
        // 没达到触发间隔，重新设定定时器
        }else{
            timeout = setTimeout(func, wait);
        }
    };
}

然后把lazyLoad放到独立的函数里调用，其实不写也行

function realFunc(){
    lazyLoad(imgs);
}

页面加载时先执行一次lazyload，否则滚动页面前可视区域的图片不显示

window.onload =function (){
    lazyLoad(imgs);
};

利用上面的节流方案来监听scroll动作，然后执行lazyload

window.addEventListener('scroll',throttle(realFunc,250,500));

就这些了，真心说比用jquery的lazyLoad插件实现简洁得多，也优美得多。

本站lazyload方案

本站前端需求：

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