JavaScript中如何实现图片懒加载？-js教程-PHP中文网

JavaScript中如何实现图片懒加载？

冰火之心

发布： 2025-04-25 22:57:01

原创

268人浏览过

在javascript中实现图片懒加载可以通过以下步骤：1. 使用占位符图片和data-src属性存储实际图片url。2. 利用intersectionobserverapi检测图片进入视口并加载，或使用滚动事件作为回退方案。3. 考虑预加载、渐进加载和错误处理来优化性能和用户体验。懒加载不仅适用于图片，还能用于其他资源，但需注意seo影响和用户体验问题。

JavaScript中如何实现图片懒加载？

在JavaScript中实现图片懒加载是一种提高网页性能的有效方法，尤其是在处理大量图片时。懒加载技术可以显著减少初始加载时间和带宽消耗。下面我将详细介绍如何实现这一功能，并分享一些我在实际项目中的经验和思考。

实现图片懒加载的核心思想是，只有当图片即将进入用户的视口时，才开始加载图片。这不仅可以加快页面加载速度，还能提升用户体验。让我们从一个简单的实现开始，然后逐步深入到更复杂的场景。

首先，我们需要一个基本的HTML结构，其中包含一些图片元素，但它们的src属性被设置为一个占位符图片，而实际图片的URL则存储在data-src属性中：

立即学习“Java免费学习笔记（深入）”；

@@##@@

登录后复制

接下来，我们使用JavaScript来检测图片是否进入视口，并在合适的时机加载图片：

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.removeAttribute("data-src");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers that don't support IntersectionObserver
        let lazyLoad = function() {
            lazyImages.forEach(function(lazyImage) {
                if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.removeAttribute("data-src");
                    lazyImages = lazyImages.filter(function(image) {
                        return image !== lazyImage;
                    });

                    if (lazyImages.length === 0) {
                        document.removeEventListener("scroll", lazyLoad);
                        window.removeEventListener("resize", lazyLoad);
                        window.removeEventListener("orientationchange", lazyLoad);
                    }
                }
            });
        };

        document.addEventListener("scroll", lazyLoad);
        window.addEventListener("resize", lazyLoad);
        window.addEventListener("orientationchange", lazyLoad);
    }
});

登录后复制

这个实现使用了现代浏览器支持的IntersectionObserverAPI，它可以高效地监控元素是否进入视口。如果浏览器不支持IntersectionObserver，我们则使用传统的滚动事件监听来实现类似的功能。

在实际项目中，我发现使用IntersectionObserver不仅可以提高性能，还能减少代码复杂度，因为它可以自动处理滚动、调整大小等事件，而不需要手动添加和移除事件监听器。然而，值得注意的是，IntersectionObserver在一些旧版浏览器中可能不被支持，因此需要提供一个回退方案。

关于性能优化，我建议在实现懒加载时考虑以下几点：

预加载：在用户滚动到图片之前，可以预加载一些即将进入视口的图片，以减少等待时间。
渐进加载：使用低分辨率的图片作为占位符，然后在图片加载完成后替换为高分辨率版本，这样可以提升用户体验。
错误处理：当图片加载失败时，提供一个默认的错误图片或重试机制，确保用户不会看到破损的图片。

在我的项目经验中，我发现懒加载不仅适用于图片，还可以用于其他资源，如视频、脚本等。通过合理使用懒加载，可以显著提升网页的加载速度和用户体验。

然而，懒加载也有一些潜在的缺点和需要注意的地方：

SEO影响：搜索引擎可能无法正确索引懒加载的图片，因为它们在初始加载时并不存在于DOM中。可以通过在中添加来预加载关键图片，或者使用服务器端渲染来解决这个问题。
用户体验：如果实现不当，用户可能会在滚动时看到图片闪烁或加载延迟，这会影响用户体验。可以通过优化图片加载顺序和使用渐进加载来缓解这个问题。

总的来说，JavaScript中的图片懒加载是一个强大的工具，可以显著提升网页性能和用户体验。通过结合现代API和最佳实践，我们可以创建出高效且用户友好的网页。