js图片隐藏加载

在JavaScript中实现图片的隐藏加载，通常涉及到几个基础概念和技术：

基础概念

图片懒加载（Lazy Loading）：这是一种优化网页性能的技术，它只在图片即将进入用户视野时才开始加载图片，而不是一次性加载所有图片。
Intersection Observer API：这是一个现代浏览器提供的API，用于异步观察目标元素与其祖先元素或顶级文档视窗（viewport）交叉状态的变化。

类型

基于滚动事件的懒加载：通过监听滚动事件，判断图片是否进入可视区域。
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>Image Lazy Loading</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
            margin-bottom: 20px;
        }
        .lazy-load {
            opacity: 0;
            transition: opacity 0.5s;
        }
        .lazy-load.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <img class="lazy-load" data-src="path/to/image1.jpg" alt="Image 1">
    <img class="lazy-load" data-src="path/to/image2.jpg" alt="Image 2">
    <img class="lazy-load" data-src="path/to/image3.jpg" alt="Image 3">
    <!-- 更多图片 -->

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

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

解释

HTML部分：每个图片元素都有一个data-src属性，用于存储实际的图片路径，初始src属性为空。
CSS部分：定义了图片的样式，初始状态下图片透明度为0，加载完成后透明度变为1。
JavaScript部分：
- 使用IntersectionObserver监听图片是否进入可视区域。
- 当图片进入可视区域时，将data-src的值赋给src，并添加loaded类以显示图片。
- 停止观察已加载的图片。