乐趣区

关于javascript:手写图片懒加载

jiezi

介绍

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

原理

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

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

开始滚动，动图如下

退出移动版