前端页面懒加载如何实现

前端页面懒加载的实现方法有：延迟加载图片、延迟加载视频、延迟加载第三方资源、Intersection Observer API、滚动事件监听。

其中，Intersection Observer API 是一种现代化且高效的方式，可以在不占用主线程的情况下检测元素何时进入视口，并触发懒加载行为。下面我们将详细介绍如何使用 Intersection Observer API 实现前端页面懒加载。

一、前端页面懒加载概述

懒加载（Lazy Loading）是一种优化网页性能的技术，通过延迟加载网页内容（如图片、视频、脚本等），来减少初始页面加载时间和带宽消耗，进而提升用户体验。懒加载技术特别适用于内容较多的网站，比如新闻网站、社交媒体平台和电商网站。

为什么要使用懒加载？

减少页面加载时间：懒加载可以显著减少初始页面加载的资源，从而提升页面加载速度。
提升用户体验：用户可以更快地看到页面的主要内容，而非等待所有资源加载完毕。
节省带宽：只加载用户当前视口内的资源，减少不必要的带宽消耗。
提高SEO：搜索引擎更青睐加载速度快、用户体验好的网页。

二、如何实现图片懒加载

1、使用 HTML5 的 `loading` 属性

HTML5 引入了 loading 属性，可以直接在 img 标签上使用 loading="lazy" 来实现懒加载。这是最简单的方法，但需要浏览器支持。

<img src="example.jpg" alt="Example Image" loading="lazy">

2、使用 JavaScript 实现懒加载

这种方法兼容性更好，适用于所有主流浏览器。通过监听滚动事件来判断图片是否进入视口。

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img.lazy");
    const lazyLoad = () => {
        lazyImages.forEach(img => {
            if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom > 0 && getComputedStyle(img).display !== "none") {
                img.src = img.dataset.src;
                img.classList.remove("lazy");
            }
        });
        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);
});

3、使用 Intersection Observer API

Intersection Observer 是一种现代化的监听机制，可以高效地检测元素何时进入视口，并触发懒加载行为。

document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img.lazy");
    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });
        lazyImages.forEach(lazyImage => {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // Fallback for browsers without Intersection Observer support
        const lazyLoad = () => {
            lazyImages.forEach(img => {
                if (img.getBoundingClientRect().top < window.innerHeight && img.getBoundingClientRect().bottom > 0 && getComputedStyle(img).display !== "none") {
                    img.src = img.dataset.src;
                    img.classList.remove("lazy");
                }
            });
            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);
    }
});

三、视频懒加载的实现

视频懒加载与图片懒加载类似，通过延迟加载视频资源来提高页面性能。可以使用 Intersection Observer API 或者 JavaScript 来实现。

使用 Intersection Observer API 实现视频懒加载

document.addEventListener("DOMContentLoaded", function() {
    const lazyVideos = document.querySelectorAll("video.lazy");
    if ("IntersectionObserver" in window) {
        let lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let lazyVideo = entry.target;
                    lazyVideo.src = lazyVideo.dataset.src;
                    lazyVideo.load();
                    lazyVideo.classList.remove("lazy");
                    lazyVideoObserver.unobserve(lazyVideo);
                }
            });
        });
        lazyVideos.forEach(lazyVideo => {
            lazyVideoObserver.observe(lazyVideo);
        });
    }
});

使用 JavaScript 监听滚动事件实现视频懒加载

document.addEventListener("DOMContentLoaded", function() {
    const lazyVideos = document.querySelectorAll("video.lazy");
    const lazyLoad = () => {
        lazyVideos.forEach(video => {
            if (video.getBoundingClientRect().top < window.innerHeight && video.getBoundingClientRect().bottom > 0 && getComputedStyle(video).display !== "none") {
                video.src = video.dataset.src;
                video.load();
                video.classList.remove("lazy");
            }
        });
        if (lazyVideos.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);
});

四、第三方资源的懒加载

第三方资源包括广告、社交媒体插件等，这些资源通常加载较慢且体积庞大，通过懒加载可以显著提升页面性能。

使用 Intersection Observer API 实现第三方资源懒加载

document.addEventListener("DOMContentLoaded", function() {
    const lazyScripts = document.querySelectorAll("script.lazy");
    if ("IntersectionObserver" in window) {
        let lazyScriptObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    let lazyScript = entry.target;
                    let script = document.createElement("script");
                    script.src = lazyScript.dataset.src;
                    document.body.appendChild(script);
                    lazyScript.classList.remove("lazy");
                    lazyScriptObserver.unobserve(lazyScript);
                }
            });
        });
        lazyScripts.forEach(lazyScript => {
            lazyScriptObserver.observe(lazyScript);
        });
    }
});

使用 JavaScript 监听滚动事件实现第三方资源懒加载

document.addEventListener("DOMContentLoaded", function() {
    const lazyScripts = document.querySelectorAll("script.lazy");
    const lazyLoad = () => {
        lazyScripts.forEach(script => {
            if (script.getBoundingClientRect().top < window.innerHeight && script.getBoundingClientRect().bottom > 0 && getComputedStyle(script).display !== "none") {
                let newScript = document.createElement("script");
                newScript.src = script.dataset.src;
                document.body.appendChild(newScript);
                script.classList.remove("lazy");
            }
        });
        if (lazyScripts.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);
});

五、Intersection Observer API 的详细介绍

什么是 Intersection Observer API？

Intersection Observer API 是一种新的浏览器 API，它允许我们异步地观察一个元素与其祖先元素（或顶级文档的视口）交叉状态的变化。换句话说，它可以帮助我们检测某个元素何时进入或离开视口，以及它在视口中的可见比例。

Intersection Observer API 的基本用法

使用 Intersection Observer API 实现懒加载的基本步骤如下：

创建一个 IntersectionObserver 实例，并指定回调函数。
使用该实例观察需要懒加载的元素。
在回调函数中处理元素的加载逻辑。

const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            // 处理元素的懒加载逻辑
            const lazyElement = entry.target;
            lazyElement.src = lazyElement.dataset.src;
            lazyElement.classList.remove("lazy");
            observer.unobserve(lazyElement);
        }
    });
});
// 开始观察元素
const lazyElements = document.querySelectorAll(".lazy");
lazyElements.forEach(element => {
    observer.observe(element);
});

Intersection Observer API 的参数和选项

创建 IntersectionObserver 实例时，可以传递一个配置对象来指定观察的选项：

const options = {
    root: null, // 指定观察的祖先元素，null 表示视口
    rootMargin: "0px", // 指定根元素的外边距
    threshold: 0.1 // 指定触发回调的可见比例
};
const observer = new IntersectionObserver(callback, options);

Intersection Observer API 的优缺点

优点：

性能高效：不像传统的滚动事件监听器，Intersection Observer 不会频繁触发回调，从而减少性能开销。
易于使用：API 设计简单，易于集成到现有项目中。
功能强大：可以精确控制触发懒加载的时机和条件。

缺点：

浏览器兼容性：虽然大多数现代浏览器支持 Intersection Observer API，但某些老旧浏览器（如 IE）不支持，需要使用 Polyfill。

六、综合案例：使用 Intersection Observer API 实现全页面懒加载

以下是一个综合案例，展示了如何使用 Intersection Observer API 实现图片、视频和第三方资源的懒加载。

HTML 结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lazy Loading Example</title>
</head>
<body>
    <h1>Lazy Loading Example</h1>
    <img class="lazy" data-src="example.jpg" alt="Example Image">
    <video class="lazy" data-src="example.mp4" controls></video>
    <script class="lazy" data-src="example.js"></script>
    <script src="lazyload.js"></script>
</body>
</html>

JavaScript 实现

document.addEventListener("DOMContentLoaded", function() {
    const lazyElements = document.querySelectorAll(".lazy");
    if ("IntersectionObserver" in window) {
        let observer = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const lazyElement = entry.target;
                    if (lazyElement.tagName === "IMG") {
                        lazyElement.src = lazyElement.dataset.src;
                    } else if (lazyElement.tagName === "VIDEO") {
                        lazyElement.src = lazyElement.dataset.src;
                        lazyElement.load();
                    } else if (lazyElement.tagName === "SCRIPT") {
                        const script = document.createElement("script");
                        script.src = lazyElement.dataset.src;
                        document.body.appendChild(script);
                    }
                    lazyElement.classList.remove("lazy");
                    observer.unobserve(lazyElement);
                }
            });
        });
        lazyElements.forEach(element => {
            observer.observe(element);
        });
    } else {
        // Fallback for browsers without Intersection Observer support
        const lazyLoad = () => {
            lazyElements.forEach(element => {
                if (element.getBoundingClientRect().top < window.innerHeight && element.getBoundingClientRect().bottom > 0 && getComputedStyle(element).display !== "none") {
                    if (element.tagName === "IMG") {
                        element.src = element.dataset.src;
                    } else if (element.tagName === "VIDEO") {
                        element.src = element.dataset.src;
                        element.load();
                    } else if (element.tagName === "SCRIPT") {
                        const script = document.createElement("script");
                        script.src = element.dataset.src;
                        document.body.appendChild(script);
                    }
                    element.classList.remove("lazy");
                }
            });
            if (lazyElements.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);
    }
});

七、懒加载的最佳实践

1、使用占位符

在懒加载过程中，使用占位符可以避免页面布局的跳动，提升用户体验。

<img class="lazy" data-src="example.jpg" src="placeholder.jpg" alt="Example Image">

2、优先加载首屏内容

确保首屏内容（如页面头部、主要标题等）不进行懒加载，以便用户可以快速看到主要内容。

3、优化资源大小

在进行懒加载前，确保图片、视频等资源已经进行压缩和优化，以减少加载时间和带宽消耗。

4、结合其他性能优化技术

懒加载只是网页性能优化的一部分，结合其他技术（如缓存策略、代码拆分、CDN 等）可以进一步提升网页性能。

八、使用项目管理系统提升开发效率

在开发过程中，使用高效的项目管理系统可以提升团队协作效率和项目进度。推荐以下两个项目管理系统：

研发项目管理系统 PingCode：PingCode 专为研发团队设计，提供了需求管理、缺陷追踪、版本发布等功能，可以帮助团队更好地管理研发过程。
通用项目协作软件 Worktile：Worktile 适用于各类团队，提供了任务管理、时间规划、文档协作等功能，帮助团队提高协作效率。

通过使用上述项目管理系统，可以更好地管理懒加载技术的开发和实施过程，确保项目按计划顺利进行。

通过本文，我们详细介绍了前端页面懒加载的实现方法，包括图片、视频、第三方资源的懒加载技术，特别是使用 Intersection Observer API 的实现方法和优缺点。希望本文对你在实际开发中实现懒加载有所帮助。