web前端图片懒加载的原理与实现方式有哪些

发布时间：2023-03-01 13:49:01 作者：iii
来源：亿速云阅读：146

Web前端图片懒加载的原理与实现方式有哪些

引言

在现代Web开发中，图片是网页内容的重要组成部分。然而，随着网页中图片数量的增加，页面加载时间也会随之增加，从而影响用户体验。为了优化页面加载性能，图片懒加载（Lazy Loading）技术应运而生。本文将详细介绍图片懒加载的原理、实现方式、优化策略以及实际应用场景。

什么是图片懒加载

图片懒加载是一种延迟加载图片的技术，即在页面加载时，只加载当前视口（Viewport）内的图片，而其他图片则延迟加载，直到用户滚动到它们所在的位置时才进行加载。这样可以减少页面初始加载时的请求数量，从而加快页面加载速度，提升用户体验。

图片懒加载的原理

图片懒加载的核心原理是通过监听用户的滚动行为，判断图片是否进入视口，如果进入视口则加载图片。具体来说，图片懒加载的实现通常包括以下几个步骤：

占位符：在页面加载时，使用占位符（如空白图片或低分辨率图片）代替实际图片，以减少初始加载时的请求数量。
监听滚动事件：通过监听页面的滚动事件，判断图片是否进入视口。
加载图片：当图片进入视口时，将占位符替换为实际图片。

图片懒加载的实现方式

4.1 使用原生JavaScript实现

使用原生JavaScript实现图片懒加载是最基础的方式。以下是一个简单的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading with JavaScript</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <img data-src="image1.jpg" alt="Image 1">
        <img data-src="image2.jpg" alt="Image 2">
        <img data-src="image3.jpg" alt="Image 3">
        <img data-src="image4.jpg" alt="Image 4">
        <img data-src="image5.jpg" alt="Image 5">
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let 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.hasAttribute("data-src");
                    });

                    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);
            }
        });
    </script>
</body>
</html>

4.2 使用Intersection Observer API实现

Intersection Observer API是现代浏览器提供的一种用于异步观察目标元素与祖先元素或视口交叉状态的方式。使用Intersection Observer API可以更高效地实现图片懒加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading with Intersection Observer</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <img data-src="image1.jpg" alt="Image 1">
        <img data-src="image2.jpg" alt="Image 2">
        <img data-src="image3.jpg" alt="Image 3">
        <img data-src="image4.jpg" alt="Image 4">
        <img data-src="image5.jpg" alt="Image 5">
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let 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.hasAttribute("data-src");
                    });

                    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);
            }
        });
    </script>
</body>
</html>

4.3 使用第三方库实现

除了使用原生JavaScript和Intersection Observer API外，还可以使用一些第三方库来实现图片懒加载。这些库通常提供了更丰富的功能和更好的兼容性。以下是一些常用的第三方库：

Lozad.js：一个轻量级的图片懒加载库，支持Intersection Observer API。
LazyLoad：一个简单易用的图片懒加载库，支持多种浏览器。
Vanilla LazyLoad：一个纯JavaScript实现的图片懒加载库，支持Intersection Observer API。

以下是一个使用Lozad.js实现图片懒加载的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading with Lozad.js</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div>
        <img data-src="image1.jpg" alt="Image 1" class="lozad">
        <img data-src="image2.jpg" alt="Image 2" class="lozad">
        <img data-src="image3.jpg" alt="Image 3" class="lozad">
        <img data-src="image4.jpg" alt="Image 4" class="lozad">
        <img data-src="image5.jpg" alt="Image 5" class="lozad">
    </div>

    <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
    <script>
        const observer = lozad('.lozad');
        observer.observe();
    </script>
</body>
</html>

4.4 使用CSS实现

虽然CSS本身并不支持图片懒加载，但可以通过一些技巧来实现类似的效果。例如，使用background-image属性结合data-*属性来实现图片懒加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Loading with CSS</title>
    <style>
        .lazy-image {
            width: 100%;
            height: 200px;
            background-color: #f0f0f0;
            margin-bottom: 20px;
        }

        .lazy-image.loaded {
            background-image: none;
        }
    </style>
</head>
<body>
    <div>
        <div class="lazy-image" data-src="image1.jpg"></div>
        <div class="lazy-image" data-src="image2.jpg"></div>
        <div class="lazy-image" data-src="image3.jpg"></div>
        <div class="lazy-image" data-src="image4.jpg"></div>
        <div class="lazy-image" data-src="image5.jpg"></div>
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let lazyImages = [].slice.call(document.querySelectorAll(".lazy-image"));

            let lazyLoad = function() {
                lazyImages.forEach(function(lazyImage) {
                    if (lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0 && getComputedStyle(lazyImage).display !== "none") {
                        lazyImage.style.backgroundImage = `url(${lazyImage.dataset.src})`;
                        lazyImage.classList.add("loaded");
                        lazyImage.removeAttribute("data-src");
                    }
                });

                lazyImages = lazyImages.filter(function(image) {
                    return image.hasAttribute("data-src");
                });

                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);
        });
    </script>
</body>
</html>

图片懒加载的优化策略

虽然图片懒加载可以有效减少页面初始加载时的请求数量，但在实际应用中，还需要考虑一些优化策略，以进一步提升性能。

预加载关键图片：对于一些关键图片（如首屏图片），可以在页面加载时立即加载，以确保用户能够快速看到重要内容。
使用低分辨率占位符：在图片加载之前，可以使用低分辨率的占位符图片，以减少页面加载时的空白区域。
延迟加载非关键资源：除了图片外，还可以延迟加载其他非关键资源（如JavaScript、CSS等），以进一步减少页面初始加载时的请求数量。
使用CDN加速：通过使用CDN（内容分发网络）来加速图片的加载速度，从而提升用户体验。
图片格式优化：选择合适的图片格式（如WebP、JPEG XR等），以减少图片文件的大小，从而加快加载速度。

图片懒加载的优缺点

优点

减少初始加载时间：通过延迟加载图片，可以减少页面初始加载时的请求数量，从而加快页面加载速度。
节省带宽：对于用户来说，只有在需要时才会加载图片，从而节省了带宽。
提升用户体验：通过减少页面加载时间，可以提升用户的浏览体验。

缺点

兼容性问题：一些老旧的浏览器可能不支持某些懒加载技术（如Intersection Observer API），需要进行兼容性处理。
SEO问题：如果图片懒加载实现不当，可能会影响搜索引擎的抓取和索引，从而影响SEO效果。
复杂性增加：实现图片懒加载需要额外的代码和逻辑，增加了开发的复杂性。

图片懒加载的实际应用场景

图片懒加载技术广泛应用于各种Web场景中，特别是在图片较多的页面中。以下是一些常见的应用场景：

电商网站：电商网站通常包含大量的商品图片，使用图片懒加载可以有效减少页面加载时间，提升用户体验。
社交媒体：社交媒体平台（如Instagram、Facebook等）通常包含大量的用户上传图片，使用图片懒加载可以减少页面加载时的请求数量。
新闻网站：新闻网站通常包含大量的图片和视频，使用图片懒加载可以减少页面加载时间，提升用户的阅读体验。
图片库和相册：图片库和相册通常包含大量的高分辨率图片，使用图片懒加载可以减少页面加载时的请求数量，提升用户体验。

总结

图片懒加载是一种有效的优化技术，可以减少页面初始加载时的请求数量，从而加快页面加载速度，提升用户体验。通过使用原生JavaScript、Intersection Observer API、第三方库以及CSS等技术，可以实现图片懒加载。在实际应用中，还需要考虑一些优化策略，以进一步提升性能。尽管图片懒加载存在一些缺点，但在大多数场景下，其优点远远大于缺点，因此在实际开发中得到了广泛应用。