js怎么判断所有图片加载完成

判断所有图片加载完成的几种方法：使用事件监听、使用Promise.all、使用MutationObserver

判断所有图片是否加载完成是前端开发中常见的需求，尤其是在需要对图片进行操作或在图片加载完成后执行某些逻辑时。可以通过多种方法来实现这一目标，包括使用事件监听、使用Promise.all方法、以及使用MutationObserver。本文将详细介绍这些方法，并探讨它们的优缺点和适用场景。

一、事件监听

1.1 使用`load`事件

最常见的方式是通过监听每个图片的load事件。可以遍历所有图片元素，并在每个图片加载完成时进行计数，直到所有图片都加载完毕。

function onAllImagesLoaded(callback) {
    const images = document.querySelectorAll('img');
    let loadedCount = 0;
    const totalImages = images.length;
    images.forEach((img) => {
        if (img.complete) {
            loadedCount++;
        } else {
            img.addEventListener('load', () => {
                loadedCount++;
                if (loadedCount === totalImages) {
                    callback();
                }
            });
            img.addEventListener('error', () => {
                loadedCount++;
                if (loadedCount === totalImages) {
                    callback();
                }
            });
        }
    });
    if (loadedCount === totalImages) {
        callback();
    }
}
onAllImagesLoaded(() => {
    console.log('All images have been loaded!');
});

优点： 这种方法简单直观，适合初学者使用。

缺点： 需要遍历所有图片并添加事件监听器，当图片数量较多时，可能会影响性能。

1.2 使用`IntersectionObserver`

IntersectionObserver可以用来检测元素是否在视口中，虽然它主要用来实现懒加载，但也可以用来判断图片加载状态。

function onAllImagesLoaded(callback) {
    const images = document.querySelectorAll('img');
    let loadedCount = 0;
    const totalImages = images.length;
    const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
            if (entry.isIntersecting) {
                const img = entry.target;
                if (img.complete) {
                    loadedCount++;
                    observer.unobserve(img);
                } else {
                    img.addEventListener('load', () => {
                        loadedCount++;
                        observer.unobserve(img);
                        if (loadedCount === totalImages) {
                            callback();
                        }
                    });
                }
            }
        });
    });
    images.forEach((img) => {
        observer.observe(img);
    });
    if (loadedCount === totalImages) {
        callback();
    }
}
onAllImagesLoaded(() => {
    console.log('All images have been loaded!');
});

优点： 可以避免对不可见图片的监听，优化性能。

缺点： 比较复杂，需要理解IntersectionObserver的使用。

二、使用Promise.all

2.1 将图片加载转化为Promise

可以将每个图片加载的过程转化为一个Promise对象，使用Promise.all来等待所有图片加载完成。

function loadImage(img) {
    return new Promise((resolve, reject) => {
        if (img.complete) {
            resolve();
        } else {
            img.addEventListener('load', resolve);
            img.addEventListener('error', reject);
        }
    });
}
function onAllImagesLoaded() {
    const images = document.querySelectorAll('img');
    const promises = Array.from(images).map(loadImage);
    Promise.all(promises)
        .then(() => {
            console.log('All images have been loaded!');
        })
        .catch((error) => {
            console.error('Some images failed to load', error);
        });
}
onAllImagesLoaded();

优点： 使用Promise的方式更加现代化，代码简洁，易于管理。

缺点： 需要对Promise有一定的理解，且需要处理可能出现的错误。

三、使用MutationObserver

3.1 观察DOM变化

MutationObserver可以用来观察DOM树的变化，适用于动态添加图片的场景。

function onAllImagesLoaded(callback) {
    const images = document.querySelectorAll('img');
    let loadedCount = 0;
    const totalImages = images.length;
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            mutation.addedNodes.forEach((node) => {
                if (node.tagName === 'IMG') {
                    if (node.complete) {
                        loadedCount++;
                    } else {
                        node.addEventListener('load', () => {
                            loadedCount++;
                            if (loadedCount === totalImages) {
                                callback();
                            }
                        });
                        node.addEventListener('error', () => {
                            loadedCount++;
                            if (loadedCount === totalImages) {
                                callback();
                            }
                        });
                    }
                }
            });
        });
    });
    observer.observe(document.body, {
        childList: true,
        subtree: true,
    });
    images.forEach((img) => {
        if (img.complete) {
            loadedCount++;
        } else {
            img.addEventListener('load', () => {
                loadedCount++;
                if (loadedCount === totalImages) {
                    callback();
                }
            });
            img.addEventListener('error', () => {
                loadedCount++;
                if (loadedCount === totalImages) {
                    callback();
                }
            });
        }
    });
    if (loadedCount === totalImages) {
        callback();
    }
}
onAllImagesLoaded(() => {
    console.log('All images have been loaded!');
});

优点： 可以动态观察DOM变化，适用于图片动态加载的场景。

缺点： 相比其他方法更复杂，需要理解MutationObserver的使用。

四、结合项目管理系统

在实际的项目开发过程中，除了判断图片加载完成，还可能涉及到对项目管理系统的使用。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。这两个系统可以帮助团队高效管理项目进度和任务分配，提高开发效率。

4.1 研发项目管理系统PingCode

PingCode是一款专门为研发团队设计的项目管理工具，支持从需求到上线的全流程管理。通过PingCode，可以高效地跟踪任务进度、进行代码审查、管理缺陷等。

4.2 通用项目协作软件Worktile

Worktile是一款通用的项目管理和团队协作工具，适用于各种类型的项目。它提供了任务管理、时间管理、文件共享等功能，帮助团队更好地协作和沟通。

总结

判断所有图片加载完成的方法有多种，包括事件监听、使用Promise.all、使用MutationObserver。每种方法都有其优缺点和适用场景，在实际开发中可以根据具体需求选择合适的方法。此外，结合使用研发项目管理系统PingCode和通用项目协作软件Worktile，可以进一步提高开发效率和团队协作能力。