js实现图片延时加载

图片延时加载基础概念

图片延时加载（Lazy Loading）是一种优化网页性能的技术，它通过延迟加载页面上非关键资源（如图片），直到这些资源即将进入用户的视野范围。这样可以减少初始页面加载时间，提高用户体验。

类型

基于滚动事件的懒加载：监听用户滚动事件，当图片进入视口时加载。
基于Intersection Observer API的懒加载：使用现代浏览器提供的Intersection Observer API来检测元素是否可见。
基于占位符的懒加载：使用低分辨率图片或SVG作为占位符，当真实图片加载完成后替换。

应用场景

电商网站：展示大量商品图片，使用懒加载可以显著提升页面加载速度。
社交媒体平台：用户滚动浏览大量动态图片，懒加载可以提高滚动流畅性。
新闻网站：长页面包含多篇文章和图片，懒加载有助于快速显示主要内容。

实现示例（基于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 Images</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <!-- 图片列表 -->
        <img class="lazy" data-src="image1.jpg" alt="Image 1">
        <img class="lazy" data-src="image2.jpg" alt="Image 2">
        <img class="lazy" data-src="image3.jpg" alt="Image 3">
        <!-- 更多图片... -->
    </div>

    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const images = document.querySelectorAll('.lazy');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        observer.unobserve(img);
                    }
                });
            }, {
                rootMargin: '0px',
                threshold: 0.1
            });

            images.forEach(img => {
                observer.observe(img);
            });
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

图片未加载：
- 原因：可能是data-src属性未正确设置或图片路径错误。
- 解决方法：检查所有图片的data-src属性是否正确，并确保图片路径有效。

滚动事件触发频繁：
- 原因：在滚动事件中直接操作DOM可能导致性能问题。
- 解决方法：使用防抖（debounce）或节流（throttle）技术来减少事件处理函数的调用频率。
兼容性问题：
- 原因：Intersection Observer API在旧版浏览器中不被支持。
- 解决方法：使用Polyfill库来兼容不支持该API的浏览器，或者回退到基于滚动事件的实现方式。

通过以上方法，可以有效实现图片延时加载，并解决常见的问题。

页面内容是否对你有帮助？

有帮助

没帮助