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

如何在JavaScript中实现懒加载？

冰火之心

发布： 2025-04-28 19:21:01

原创

969人浏览过

javascript中的懒加载可以通过以下步骤实现：1) 使用data-*属性标记资源，2) 利用intersectionobserver api监测元素进入视口，3) 对于不支持intersectionobserver的浏览器，使用滚动事件监听。这种技术可以显著提升页面加载速度和用户体验，但需注意性能、seo和用户体验等方面的影响。

如何在JavaScript中实现懒加载？

实现JavaScript中的懒加载（Lazy Loading）其实是优化网页性能的重要技巧，尤其是对于那些图片、视频或者其他资源较多的页面。懒加载的核心思想是延迟加载非关键资源，直到它们真正需要时才进行加载，这样可以显著减少页面初次加载时的资源消耗，提升用户体验。

当我第一次接触懒加载时，我发现它不仅可以用于图片，还可以应用于脚本、样式表甚至是组件的加载。这让我对其潜力有了更深的理解。让我们来看看如何在JavaScript中实现这种神奇的技术。

首先，我们需要理解的是，懒加载通常依赖于一些关键的HTML和JavaScript技术，比如使用data-*属性来标记资源，使用IntersectionObserver API来监测元素是否进入视口。以下是一个实现懒加载图片的简单示例：

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

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

    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.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 对于不支持IntersectionObserver的旧浏览器，使用传统的滚动监听方法
        var lazyLoad = function() {
            if (lazyImages.length === 0) {
                document.removeEventListener("scroll", lazyLoad);
                return;
            }

            lazyImages.forEach(function(lazyImage) {
                if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImages = lazyImages.filter(function(image) {
                        return image !== lazyImage;
                    });

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

        document.addEventListener("scroll", lazyLoad);
        lazyLoad();
    }
});

登录后复制

这个代码片段展示了如何使用IntersectionObserver来实现图片的懒加载。如果浏览器不支持IntersectionObserver，我们还提供了一个基于滚动事件的备用方案。

在实际应用中，懒加载并不总是完美的。以下是一些需要注意的点：