关于javascript:手写图片懒加载

介绍

当我将页面滚动到有图片的中央时再显示图片，否则就不显示，这样一来就能够放慢页面的加载速度，同时也节俭了流量，这种按需加载图片的形式就称之为图片的懒加载。

原理

给待加载的图片一个默认的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;

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

开始滚动，动图如下