js实现图片延时加载

<!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>