移动端图片懒加载js

移动端图片懒加载是一种优化网页性能的技术，它通过延迟加载页面上的图片，直到这些图片即将进入用户的视野范围。这种技术可以显著减少初始页面加载时间，提高用户体验，尤其是在移动设备上。

基础概念

懒加载（Lazy Loading） 是一种设计模式，它延迟加载非关键资源，直到这些资源真正需要时才进行加载。对于图片来说，这意味着只有当用户滚动到图片所在的位置时，图片才会被加载。

优势

减少初始加载时间：通过延迟加载图片，可以减少页面首次加载所需的时间。
节省带宽：用户可能不会浏览整个页面，因此加载所有图片是浪费带宽的。
提高性能：减少DOM元素的数量，从而提高页面渲染速度。
更好的用户体验：页面能够更快地呈现给用户，提升交互性。

类型

基于时间的懒加载：在设定的时间后加载图片。
基于滚动的懒加载：当用户滚动到图片位置时加载图片。
基于视口的懒加载：当图片进入视口时加载。

应用场景

电商网站：展示大量商品图片。
社交媒体平台：如微博、Instagram等，用户滚动查看更多内容时加载图片。
新闻网站：长页面文章中的图片。

实现方式

以下是一个简单的JavaScript实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lazy Load Images</title>
    <style>
        img {
            width: 100%;
            height: auto;
            display: block;
        }
    </style>
</head>
<body>
    <div id="image-container">
        <!-- 图片占位符 -->
        <img src="placeholder.jpg" data-src="real-image-1.jpg" alt="Image 1">
        <img src="placeholder.jpg" data-src="real-image-2.jpg" alt="Image 2">
        <!-- 更多图片... -->
    </div>

    <script>
        function lazyLoadImages() {
            const images = document.querySelectorAll('img[data-src]');
            const observer = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        img.src = img.dataset.src;
                        observer.unobserve(img);
                    }
                });
            }, { threshold: 0.1 });

            images.forEach(img => observer.observe(img));
        }

        window.addEventListener('load', lazyLoadImages);
    </script>
</body>
</html>