html 的一篇文章，怎么让他滑到哪个位置，才加载那个图片，避免一起加载带宽不足卡死

html 的一篇文章，怎么让他滑到哪个位置，才加载那个图片，避免一起加载带宽不足卡死

展开阅读全文

在网页开发中，如果你希望实现当用户滚动到某个位置时才加载该位置的图片，可以使用“懒加载”（Lazy Loading）技术。这不仅能提升页面加载速度，还能有效节省带宽，提高用户体验。以下是如何在HTML中实现图片懒加载的几种方法：

方法一：使用 HTML5 的loading="lazy"属性

HTML5 引入了loading="lazy"属性，可以直接在 <img> 标签中使用。这是最简单也是最推荐的方法。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片懒加载示例</title>
</head>
<body>
    <div style="height: 2000px;"> <!-- 为了演示滚动效果，设置一个大高度 -->
        <h1>向下滚动查看图片</h1>
        <img src="placeholder.jpg" data-src="real-image1.jpg" alt="图片1" loading="lazy" style="display:block;margin-top:1000px;width:100%;height:auto;">
        <img src="placeholder.jpg" data-src="real-image2.jpg" alt="图片2" loading="lazy" style="display:block;margin-top:500px;width:100%;height:auto;">
        <!-- 更多图片 -->
    </div>

    <!-- 替换占位符图片的JavaScript -->
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const lazyImages = [].slice.call(document.querySelectorAll("img[loading='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.removeAttribute("data-src");
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function(lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });
            } else {
                // Fallback for browsers that do not support IntersectionObserver
                let lazyLoadThrottleTimeout;
                function lazyLoad() {
                    if(lazyLoadThrottleTimeout) {
                        clearTimeout(lazyLoadThrottleTimeout);
                    }

                    lazyLoadThrottleTimeout = setTimeout(function() {
                        let scrollTop = window.pageYOffset;
                        lazyImages.forEach(function(img) {
                            if(img.getBoundingClientRect().top < (window.innerHeight + scrollTop)) {
                                img.src = img.dataset.src;
                                img.removeAttribute("data-src");
                            }
                        });
                        if(lazyImages.length == 0) { 
                            document.removeEventListener("scroll", lazyLoad);
                            window.removeEventListener("resize", lazyLoad);
                            window.removeEventListener("orientationChange", lazyLoad);
                        }
                    }, 20);
                }

                document.addEventListener("scroll", lazyLoad);
                window.addEventListener("resize", lazyLoad);
                window.addEventListener("orientationChange", lazyLoad);
            }
        });
    </script>
</body>
</html>

注意：在上面的示例中，data-src 属性用于存储真实的图片URL，而 src 属性则使用占位符图片。当图片进入视口时，JavaScript 会将 src 属性更新为 data-src 的值。