js图片怎么延时加载

JS图片延时加载的方法包括：懒加载、Intersection Observer API、监听滚动事件、第三方库。 其中，懒加载是最常用的方法，它可以显著提升页面加载性能，减小页面加载时间。通过懒加载，只有当图片出现在视口时才会加载，从而减少了不必要的资源开销并提高用户体验。

懒加载可以通过简单的JavaScript代码实现，具体步骤包括：为图片设置占位符、监听图片是否进入视口、当图片进入视口时替换占位符为真实图片。

一、懒加载

懒加载是一种延迟加载资源的技术，通常用于图片和视频。它的核心思想是：当用户滚动到需要显示图片的位置时，再去加载该图片。这样可以减少初始加载时间和带宽消耗，提高页面性能。

1. 基本实现

懒加载的基本实现方式是先给图片设置一个占位符，等到图片即将进入视口时，再替换成真实的图片。以下是一个简单的实现示例：

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Loading</title>
    <style>
        .placeholder {
            width: 100px;
            height: 100px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <img class="placeholder" data-src="real-image.jpg" alt="Lazy Loaded Image">
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            let 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 {
                // Fallback for browsers that do not support IntersectionObserver
                let lazyLoad = function() {
                    let scrollTop = window.pageYOffset;
                    lazyImages.forEach(function(img) {
                        if (img.offsetTop < (window.innerHeight + scrollTop)) {
                            img.src = img.dataset.src;
                            img.classList.remove('lazy');
                        }
                    });
                    if (lazyImages.length == 0) {
                        document.removeEventListener("scroll", lazyLoad);
                    }
                };
                document.addEventListener("scroll", lazyLoad);
                window.addEventListener("resize", lazyLoad);
                window.addEventListener("orientationChange", lazyLoad);
            }
        });
    </script>
</body>
</html>

2. Intersection Observer API

Intersection Observer API 是一种更现代且高效的方法，用于检测元素是否进入视口。它比监听滚动事件性能更好，因为它是异步的，且不会频繁触发。

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

二、监听滚动事件

虽然 Intersection Observer API 是推荐的方法，但在某些情况下，比如需要支持老旧浏览器时，监听滚动事件也是一种可行的方案。

window.addEventListener("scroll", function() {
    let lazyImages = document.querySelectorAll("img.lazy");
    lazyImages.forEach(function(img) {
        if (img.offsetTop < window.innerHeight + window.pageYOffset) {
            img.src = img.dataset.src;
            img.classList.remove("lazy");
        }
    });
});

三、使用第三方库

有许多成熟的第三方库可以帮助实现图片懒加载，以下是一些常用的库：

1. LazyLoad

LazyLoad 是一个轻量级的 JavaScript 库，用于实现懒加载。它非常容易使用，只需简单配置即可。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-lazyload/17.3.1/lazyload.min.js"></script>
<script>
    var lazyLoadInstance = new LazyLoad({
        elements_selector: ".lazy"
    });
</script>

2. lozad.js

lozad.js 是另一个流行的懒加载库，它同样非常轻量且易用。

<script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
<script>
    const observer = lozad(); // lazy loads elements with default selector as '.lozad'
    observer.observe();
</script>

四、性能优化建议

懒加载不仅仅是延迟加载图片，还可以通过以下方式进一步优化性能：

1. 使用合适的图片格式

选择合适的图片格式可以显著减少图片大小，比如使用 WebP 格式，它比 JPEG 和 PNG 更小且质量更好。

2. 图片压缩

在上传图片之前，使用工具压缩图片，如 TinyPNG、ImageOptim 等，可以大幅减少图片大小。

3. 使用 Content Delivery Network (CDN)

将图片托管在 CDN 上，可以加快图片加载速度，减少服务器负载。

4. 设置正确的缓存策略

通过设置 HTTP 缓存头，可以让浏览器缓存图片，减少重复加载。

五、适用场景

懒加载适用于各种需要延迟加载资源的场景，特别是图片数量较多、页面加载时间较长的情况。常见的应用场景包括：

1. 电商网站

电商网站通常有大量的商品图片，通过懒加载可以显著提升用户体验。

2. 博客和新闻网站

博客和新闻网站通常包含大量的文章图片，使用懒加载可以减少初始加载时间，提高页面性能。

3. 社交媒体平台

社交媒体平台通常包含用户上传的大量图片，通过懒加载可以有效减少带宽消耗，提升用户体验。

六、注意事项

在使用懒加载时，还需要注意以下几点：

1. SEO 影响

懒加载可能会影响搜索引擎的抓取，因此需要确保图片在没有 JavaScript 的情况下也能显示，或者使用渐进增强的方式。

2. 浏览器兼容性

虽然 Intersection Observer API 已经得到了广泛支持，但仍需考虑到一些老旧浏览器的兼容性问题，可以使用 polyfill 或者回退到监听滚动事件的方式。

3. 用户体验

确保懒加载不会影响用户体验，特别是在网络较差的情况下，可能需要显示加载动画或者占位符，避免用户看到空白区域。

通过以上方法和注意事项，可以有效实现图片的延时加载，提高页面性能和用户体验。在具体实现过程中，可以根据项目需求选择合适的方法和工具，并进行相应的优化和调整。