原生 JS 懒加载简单实现

懒加载优势:

(1) 节省网络资源 – 一次性加载所有资源很慢
(2) 对用户体验 – 节省流量, 使用友好
(3) 对服务器而言 – 减轻负载压力

懒加载原理:

只显示可视区域的图片给用户

功能实现

(1) 图片标签默认是占位图, 图片真正的地址在自定义属性里
(2) 滚动时把可是区域的占位图替换成自定义属性里的图片路径

需要用到知识点:

(1) 图片距离顶部的高度:
img.offsetTop
(2) 当前窗口的高度:
window.innerHeight
(3) 滚动条滚动的高度:
document.body.scrollTop || document.documentElement.scrollTop

加载图片的判断条件:
图片距离顶部的距离 < 浏览器滚动条滚动的高度 + 浏览器窗口的高度

    var imgs = document.querySelecotrAll('img');
    window.onscroll = function () {
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        var winHeight = window.innerHeight;
        for(var i = 0; i < imgs.length; i++) {
            if (imgs[i].offsetTop < scrollTop + winHeight) {
                imgs[i].src = imgs[i].getAttribute('data-src');
            }
        }
    }