js图片多张

JavaScript 中处理多张图片通常涉及到图片的加载、显示、操作以及可能的上传。以下是关于 JavaScript 处理多张图片的一些基础概念和相关内容：

基础概念

Image 对象：JavaScript 中的 Image 对象用于表示页面上的图像。你可以使用它来预加载图片、创建动态图像等。
FileReader API：这个 API 允许网页读取用户计算机上的文件，常用于实现图片上传功能。
Canvas API：<canvas> 元素提供了丰富的绘图功能，可以用来处理和操作图片。

类型与应用场景

静态图片展示：网站首页的轮播图、相册等。
动态图片处理：图片编辑器中的滤镜效果、裁剪等。
图片上传与预览：用户上传头像或商品图片时的即时预览。

示例代码

1. 图片预加载

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);
});

2. 图片懒加载

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

3. 图片上传与预览

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