如何检查所有图像是否都加载在next.js 13（应用程序路由器）的特定组件中？

问：

Next.js 提供了 onLoadingComplete，可用于检查是否加载了特定图像。

问题

如果我在一个组件中有几个图像，并且我想检查是否加载了所有图像，该怎么办！

Promise.all(Array.from(document.images).map(img => {
if (img.complete)
    return Promise.resolve(img.naturalHeight !== 0);
return new Promise(resolve => {
    img.addEventListener('load', () => resolve(true));
    img.addEventListener('error', () => resolve(false));
});
})).then(results => {
if (results.every(res => res))
    console.log('all images loaded successfully');
else
    console.log('some images failed to load, all finished loading');
});

监听旧版 JS 中的所有图像加载