图片相关

图片占位服务API

格式：http://via.placeholder.com/宽x高/背景色/字的颜色?text=占位文字

<img src="http://via.placeholder.com/200x300/f60/fff?text=HI" alt="">

如何判断图片全部加载完成

写法1

<script>
    function imageLoaded(src) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.src = src;
            img.onload = () => resolve(src);
            img.onerror = () => reject(new Error(`图片加载失败：${src}`));
        });
    }

    async function loadImages(imageUrls) {
        try {
            await Promise.all(imageUrls.map(imageLoaded));
        } catch (error) {
            console.error(error);
        }
    }
    let num = (min,max) => {
        return Math.floor(Math.random() * max) + min
    }
    // 示例图片数组
    const images = [
        `https://picsum.photos/200/${num(100, 300)}?v=` + Math.random(),
        `https://picsum.photos/200/${num(100, 300)}?v=` + Math.random()
    ];

    // 开始加载图片
    loadImages(images).then(res => {
        alert('加载完成')
    });
</script>

写法2

//初始化
window.onload = function(){
    const container = document.getElementById('container');
    const images = Array.from(container.getElementsByTagName('img'));
    // 创建一个返回加载完图片的 Promise 数组
    const loadImagePromises = images.map(img => {
        return new Promise((resolve, reject) => {
            img.onload = () => resolve(img);
            img.onerror = () => reject(new Error(`Failed to load image: ${img.src}`));
        });
    });

    // 使用 Promise.all 等待所有图片加载完毕
    Promise.all(loadImagePromises)
        .then(() => {
            // 所有图片加载完毕后处理布局
            imgLocation('container','box');// 在所有图片加载完成后设置瀑布流布局
        })
        .catch(err => {
            console.error(err);
        });
}