js图片多张

function preloadImages(urls, callback) {
    let loadedCount = 0;
    const images = [];

    urls.forEach(url => {
        const img = new Image();
        img.src = url;
        img.onload = () => {
            loadedCount++;
            images.push(img);
            if (loadedCount === urls.length) {
                callback(images);
            }
        };
    });
}

// 使用示例
preloadImages(['image1.jpg', 'image2.jpg'], images => {
    console.log('所有图片已加载完成', images);
});

<img data-src="image1.jpg" class="lazy-load">
<img data-src="image2.jpg" class="lazy-load">
<!-- 更多图片 -->

<script>
document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = [].slice.call(document.querySelectorAll("img.lazy-load"));

    if ("IntersectionObserver" in window) {
        let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
            entries.forEach(function(entry) {
                if (entry.isIntersecting) {
                    let lazyImage = entry.target;
                    lazyImage.src = lazyImage.dataset.src;
                    lazyImage.classList.remove("lazy-load");
                    lazyImageObserver.unobserve(lazyImage);
                }
            });
        });

        lazyImages.forEach(function(lazyImage) {
            lazyImageObserver.observe(lazyImage);
        });
    } else {
        // 回退方案
        lazyImages.forEach(function(lazyImage) {
            lazyImage.src = lazyImage.dataset.src;
        });
    }
});
</script>

<input type="file" id="fileInput" multiple>
<div id="preview"></div>

<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
    const preview = document.getElementById('preview');
    preview.innerHTML = ''; // 清空之前的预览

    for (let file of event.target.files) {
        if (file.type.startsWith('image/')) {
            const reader = new FileReader();
            reader.onload = function(e) {
                const img = document.createElement('img');
                img.src = e.target.result;
                img.style.width = '100px'; // 设置预览尺寸
                preview.appendChild(img);
            };
            reader.readAsDataURL(file);
        }
    }
});
</script>