Skip to main content

图片懒加载

<!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 with IntersectionObserver</title>  
    <style>  
        .placeholder {  
            background-color: #f0f0f0;  
            width: 100%;  
            height: 200px;  
        }  
        img {  
            width: 100%;  
            height: auto;  
            display: block;  
        }  
    </style>  
</head>  
<body>  
    <div class="image-container">  
        <img data-src="image1.jpg" alt="Image 1" class="placeholder">  
        <img data-src="image2.jpg" alt="Image 2" class="placeholder">  
        <img data-src="image3.jpg" alt="Image 3" class="placeholder">  
    </div>  

    <script>  
        document.addEventListener("DOMContentLoaded", function() { 
          // 有data-src属性的img 
            const images = document.querySelectorAll('img[data-src]');  
            const options = {  
                root: null, // 默认是视口  
                rootMargin: '0px 0px 50px 0px', // 提前加载50px  
                threshold: 0.1 // 交叉比例  
            };  

            const imageObserver = new IntersectionObserver((entries, observer) => {  
                entries.forEach(entry => {  
                    if (entry.isIntersecting) {  
                        const img = entry.target;  
                        // 从data-src上拿到图片对应src
                        img.src = img.getAttribute('data-src');  
                        img.classList.remove('placeholder');  
                        observer.unobserve(img);  
                    }  
                });  
            }, options);  

            // 给obsever 绑定image dom
            images.forEach(image => {  
                imageObserver.observe(image);  
            });  
        });  
    </script>  
</body>  
</html>