JavaScript实现图片懒加载功能

// 图片懒加载函数
function lazyLoadImages() {
    const images = document.querySelectorAll('img[data-src]');
    
    // 视口高度，用于判断图片是否在可视区域内
    const viewportHeight = window.innerHeight;

    // 滚动事件监听器
    function lazyLoad() {
        images.forEach(img => {
            // 图片顶部距离文档顶部的距离
            const imgTop = img.getBoundingClientRect().top;
            
            // 判断图片是否在视口内并且未加载过
            if (imgTop < viewportHeight && !img.src) {
                img.src = img.getAttribute('data-src');
            }
        });
    }

    // 第一次加载
    lazyLoad();

    // 滚动事件监听
    window.addEventListener('scroll', lazyLoad);
}

// 初始化图片懒加载
document.addEventListener('DOMContentLoaded', function() {
    lazyLoadImages();
});

1. 图片懒加载功能介绍：

   • 图片懒加载是一种延迟加载图片的技术，仅当图片进入用户可视区域时才加载，从而减少初始页面加载时间和带宽消耗。

2. 代码详细解析：

   • lazyLoadImages 函数：该函数获取所有带有 data-src 属性的图片元素，并注册滚动事件监听器。在滚动事件中，检查每张图片是否进入了视口，如果进入则将 data-src 属性的值赋给 src 属性，从而加载图片。

   • lazyLoad 函数：遍历所有图片元素，通过 getBoundingClientRect() 方法获取图片相对于视口的位置信息，判断图片是否在视口内并且是否已加载过。

3. 初始化：

   • 使用 DOMContentLoaded 事件确保在文档加载完毕后初始化图片懒加载功能，以免影响页面初次渲染速度。