原生Js页面滚动延迟加载图片实现原理及过程

原生Js页面滚动延迟加载图片实现原理及过程，可以通过下面的攻略来详细讲解：

一、原理

页面滚动时，对视窗中的图片进行懒加载。当图片进入可视区域时，再加载该图片。这样可以减轻页面一次性加载所有图片的负担，提高网站的响应速度和性能。

具体实现原理如下：

1. 检测网页中的所有图片
2. 获取页面可视范围内的图片
3. 预先将可视范围内的图片的 src 属性设为 loading 动画等待加载
4. 监听页面滚动事件，若滚动至图片的位置，则将该图片的 src 属性替换为原始 url，实现图片的延迟加载

二、过程

根据以上原理，实现页面滚动延迟加载图片的步骤如下：

1. 找到网页中所有需要进行延迟加载的图片

const images = document.querySelectorAll('[data-src]');

1. 判断图片是否进入可视区域

// 判断是否在可视区域内
function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    const html = document.documentElement;
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
    );
}

1. 加载图片

function loadImage(image) {
    const src = image.getAttribute('data-src');
    if (!src) {
        return;
    }
    image.src = src;
    image.removeAttribute('data-src');
}

1. 监听页面滚动事件

function onScroll() {
    for (let i = 0; i < images.length; i++) {
        const image = images[i];
        if (isInViewport(image)) {
            loadImage(image);
        }
    }
}
document.addEventListener('scroll', onScroll);

具体实现过程可以参考下面两个示例：

示例1

html代码：

<div class="gallery">
    <img data-src="image1.jpg">
    <img data-src="image2.jpg">
    <img data-src="image3.jpg">
    <img data-src="image4.jpg">
    <img data-src="image5.jpg">
    <img data-src="image6.jpg">
</div>

javascript代码：

const images = document.querySelectorAll('[data-src]');

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    const html = document.documentElement;
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
    );
}

function loadImage(image) {
    const src = image.getAttribute('data-src');
    if (!src) {
        return;
    }
    image.src = src;
    image.removeAttribute('data-src');
}

function onScroll() {
    for (let i = 0; i < images.length; i++) {
        const image = images[i];
        if (isInViewport(image)) {
            loadImage(image);
        }
    }
}

document.addEventListener('scroll', onScroll);

示例1的效果是在页面滚动时，图片会逐个出现，并逐渐加载。

示例2

html代码：

<div class="gallery">
    <img data-src="image1.jpg">
    <img data-src="image2.jpg">
    <img data-src="image3.jpg">
    <img data-src="image4.jpg">
    <img data-src="image5.jpg">
    <img data-src="image6.jpg">
</div>

javascript代码：

const images = document.querySelectorAll('[data-src]');

function isInViewport(element) {
    const rect = element.getBoundingClientRect();
    const html = document.documentElement;
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || html.clientHeight) &&
        rect.right <= (window.innerWidth || html.clientWidth)
    );
}

function loadImage(image) {
    const src = image.getAttribute('data-src');
    if (!src) {
        return;
    }
    image.src = src;
    image.removeAttribute('data-src');
}

function onScroll() {
    for (let i = 0; i < images.length; i++) {
        const image = images[i];
        if (isInViewport(image)) {
            loadImage(image);
            // 解除事件监听
            images[i].removeEventListener('load', onScroll);
        }
    }
}

for (let i = 0; i < images.length; i++) {
    // 添加load事件监听
    images[i].addEventListener('load', onScroll);
}

document.addEventListener('scroll', onScroll);

示例2的效果是图片会在进入可视范围后立即加载，不会逐渐出现。同时，每个图片只会加载一次，避免重复加载。

三、总结

以上就是原生Js页面滚动延迟加载图片实现原理及过程的详细攻略。该方法可以有效提高网站响应速度和性能，值得 Web 开发人员掌握。