使用JavaScript判断图片加载状态的几种方法

const img = document.getElementById('myImage');
if (img.complete) {
    console.log('图片已经加载完成');
} else {
    console.log('图片尚未加载完成');
}

const img = new Image(); // 或者 document.getElementById('myImage')

img.addEventListener('load', function() {
    console.log('图片加载成功');
    // 图片加载完成后的操作
});

img.addEventListener('error', function() {
    console.log('图片加载失败');
    // 图片加载失败后的操作
});

// 设置图片源（如果是通过JS创建的图片）
img.src = 'path/to/image.jpg';

function loadImage(url) {
    return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => resolve(img);
        img.onerror = () => reject(new Error('图片加载失败'));
        img.src = url;
    });
}

// 使用示例
loadImage('path/to/image.jpg')
    .then(img => {
        console.log('图片加载成功', img);
        document.body.appendChild(img);
    })
    .catch(err => {
        console.error(err);
    });

function areAllImagesLoaded() {
    const images = document.getElementsByTagName('img');
    let loadedCount = 0;
    let totalImages = images.length;
    
    if (totalImages === 0) return true;
    
    Array.from(images).forEach(img => {
        if (img.complete) {
            loadedCount++;
        } else {
            img.addEventListener('load', () => {
                loadedCount++;
                checkAllLoaded();
            });
            img.addEventListener('error', () => {
                loadedCount++; // 即使失败也算作"完成"
                checkAllLoaded();
            });
        }
    });
    
    function checkAllLoaded() {
        if (loadedCount === totalImages) {
            console.log('所有图片加载完成');
            // 执行所有图片加载完成后的操作
        }
    }
    
    // 初始检查
    checkAllLoaded();
    
    return false; // 异步操作无法同步返回结果
}

// 使用示例
areAllImagesLoaded();

const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
        mutation.addedNodes.forEach(node => {
            if (node.nodeType === 1 && node.tagName.toLowerCase() === 'img') {
                // 新添加的图片元素
                if (node.complete) {
                    console.log('图片已加载', node);
                } else {
                    node.addEventListener('load', () => console.log('图片加载完成', node));
                    node.addEventListener('error', () => console.log('图片加载失败', node));
                }
            }
        });
    });
});

observer.observe(document.body, {
    childList: true,
    subtree: true
});