手写图片懒加载

介绍

当我将页面滚动到有图片的地方时再显示图片，否则就不显示，这样一来就可以加快页面的加载速度，同时也节省了流量，这种按需加载图片的方式就称之为图片的懒加载。

原理

给待加载的图片一个默认的src，当图片出现在可视区域后在把真正的src赋值给该图片，从下图可以看出，判断图片是否进入可视区域的逻辑就是图片与浏览器顶端的距离是否小于可视区域高度加滚动区域高度，若小于，即进入可视区域，反之则没有

实现

html和css部分，代码如下

js代码开始前需要了解一些API

可视区域高： document.body.clientHeight;
滚动区域高： document.body.scrollTop;
HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部的距离
具体实现的js代码如下：

//n用来避免重复给image赋值src
let n = 0;
//获取所有image元素
const images = document.querySelectorAll('img');
//所有image元素的长度
const num = images.length;
//懒记载实现
function lazyLoad() {
    //获取可视区域高度
    const clientHeight = document.body.clientHeight;
    //获取滚动区域高度
    const scrollTop = document.body.scrollTop;
    // 循环所有image元素, inde为n, 不用每次都从0开始，已经循环过的不需要重新循环，提高运行效率
    for (let index = n; index < num; index++) {
        //当前image
        const img = images[index];
        //获取当前image到浏览器顶部的距离，而不是到当前窗口的顶部的距离
        const offsetTop = img.offsetTop;
        //判断是否在可视区域内
        if (offsetTop < clientHeight + scrollTop) {
            //判断是否已经加载过
            if (img.getAttribute('src') === './image/loading.gif') {
            //加载真正的src
                img.src = img.getAttribute('data-src');
            }
            // n++
            n += 1;
        }
    }
}
// 先运行一次
lazyLoad();
//将懒加载函数赋值给浏览器的onscroll函数，滚动即执行函数
window.onscroll = lazyLoad;

初始加载，初始状态两个图片在可视区域内，所以初始加载两个图片

开始滚动，动图如下