js实现图片的懒加载(jquery)

一、原理

1. 在浏览器滚动的时候，遍历所有图片，若图片在视窗可视区域，则加载该图片
2. 将图片地址存放在自定义属性中(data-src)，需要加载图片再从中取出来
3. 判断图片可见：
   • 图片上部分进入可视窗体

windowHeight + scrollTop > offsetTop
- 图片下部分进入可视窗体

offsetTop + nodeHeight > scrollTop

二、如何实现

1. 需要用到4个高度

let windowHeight = $(window).height(),//视窗高度
        scrollTop = $(window).scrollTop(),//滚动条滚动距离
        offsetTop = $node                        //图片相对于文档的垂直坐标
            .offset()
            .top,
        nodeHeight = $node.height();    //图片高度

2. 判断图片可见

if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
        return true;
    } else {
        return false;
    }

3. 方法：是否显示该图片

const isShow = ($node) => {
    let windowHeight = $(window).height(),
        scrollTop = $(window).scrollTop(),
        offsetTop = $node
            .offset()
            .top,
        nodeHeight = $node.height();
    if (windowHeight + scrollTop > offsetTop && offsetTop + nodeHeight > scrollTop) {
        return true;
    } else {
        return false;
    }
}

4. 方法：遍历所有图片，加载没有load类名且isShow返回true的图片（加载前给图片加类名load)

const loadImgs = ()=>{
    console.log('1');
    $('.wrapper img').not('.load').each(function(index){
    console.log('2');
        let $node = $(this);
        if(isShow($node)){
            $node.addClass('load');
            $node.attr('src',$node.attr('data-src'));
        }
    });
}

5. 最后，监听屏幕滚动事件，并在一开始进入界面时加载图片

loadImgs();
$(window).scroll(function () {
    loadImgs();
})

三、 附上代码和效果

• 附上代码地址
• 效果