JavaScript 实现图片懒加载功能的方法

在网页开发中，图片懒加载是一种优化技术，能够有效提升页面的加载速度和用户体验。当页面包含大量图片时，懒加载可以避免一次性加载所有图片，而是在用户滚动到相应位置时再进行加载，节省带宽和加载时间。下面介绍一种使用JavaScript实现图片懒加载功能的方法。

我们需要在HTML中为图片设置一个自定义属性，比如“data-src”，用于存储图片的真实路径。而图片的“src”属性则设置为一个占位符或者默认图片。例如：

<img data-src="real-image.jpg" src="placeholder.jpg" alt="图片描述">

接下来，我们使用JavaScript来实现懒加载的逻辑。核心思路是监听页面的滚动事件，当图片进入可视区域时，将“data-src”属性的值赋给“src”属性，从而触发图片的加载。

以下是一个简单的JavaScript代码示例：

window.addEventListener('scroll', lazyLoad);

function lazyLoad() {
    const images = document.querySelectorAll('img[data-src]');
    images.forEach(image => {
        const rect = image.getBoundingClientRect();
        if (rect.top < window.innerHeight && rect.bottom >= 0) {
            image.src = image.dataset.src;
            image.removeAttribute('data-src');
        }
    });
}

在上述代码中，我们首先获取所有带有“data-src”属性的图片元素，然后遍历这些图片，通过“getBoundingClientRect”方法获取图片的位置信息。当图片的顶部位置小于窗口高度且底部位置大于等于0时，说明图片进入了可视区域，此时将“data-src”属性的值赋给“src”属性，并移除“data-src”属性。

为了确保页面首次加载时也能检查图片是否在可视区域内，我们可以在页面加载完成后手动调用一次“lazyLoad”函数：

window.addEventListener('load', lazyLoad);

通过以上方法，我们就可以轻松地使用JavaScript实现图片懒加载功能。这种方法不仅简单易懂，而且兼容性较好，可以在大多数现代浏览器中正常使用。在实际应用中，我们可以根据需求对代码进行进一步的优化和扩展，以满足不同的业务场景。