如何使用JavaScript判断图片是否在页面加载完成

在网页开发中，判断图片是否加载完成是一个常见的需求，无论是为了预加载资源、实现懒加载还是进行性能监控。本文将详细介绍几种使用JavaScript判断图片加载状态的方法。

1. 使用complete属性

最简单的方法是使用图片元素的complete属性：

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

complete属性返回一个布尔值，表示图片是否已经加载完成（包括加载失败的情况）。

2. 监听load和error事件

更可靠的方法是监听图片的load和error事件：

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

3. 使用Promise封装图片加载

为了更方便地处理异步操作，可以使用Promise封装图片加载：

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

4. 检查页面所有图片是否加载完成

如果需要检查页面中所有图片是否都已加载完成，可以使用以下方法：

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

5. 使用MutationObserver监控动态添加的图片

对于动态添加到DOM中的图片，可以使用MutationObserver来监控：

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

6. 性能优化建议

1. 预加载关键图片：对于首屏关键图片，可以提前加载
2. 懒加载非关键图片：使用Intersection Observer API实现懒加载
3. 设置适当的宽高：避免布局抖动
4. 使用合适的图片格式：WebP、AVIF等现代格式可以减小文件大小

总结

判断图片是否加载完成是网页性能优化和用户体验提升的重要环节。根据具体需求，可以选择简单的方法如complete属性，或者更复杂的事件监听和Promise封装。对于动态内容，MutationObserver提供了有效的监控手段。

在实际开发中，建议结合多种方法，根据具体场景选择最合适的解决方案。