有办法确定何时使用JS加载了4张图像。您可以使用JavaScript的Promise和async/await来实现。
首先,您可以创建一个函数,该函数将返回一个Promise,该Promise将在图像加载完成时解析。然后,您可以使用async/await来等待所有4个图像加载完成。
以下是一个示例代码:
function loadImage(src) {
return new Promise((resolve, reject) => {
const img = new Image();
img.src = src;
img.onload = () => resolve(img);
img.onerror = reject;
});
}
async function loadImages(imageSources) {
const images = [];
for (const src of imageSources) {
const img = await loadImage(src);
images.push(img);
}
return images;
}
const imageSources = [
'https://example.com/image1.jpg',
'https://example.com/image2.jpg',
'https://example.com/image3.jpg',
'https://example.com/image4.jpg',
];
loadImages(imageSources).then(images => {
console.log('所有图像已加载');
// 在这里处理已加载的图像
});
在这个示例中,我们首先创建了一个名为loadImage
的函数,该函数接受一个图像URL并返回一个Promise,该Promise将在图像加载完成时解析。然后,我们创建了一个名为loadImages
的函数,该函数接受一个包含图像URL的数组,并使用async/await等待所有图像加载完成。最后,我们使用loadImages
函数加载4张图像,并在所有图像加载完成后执行某些操作。
请注意,这个示例仅适用于现代浏览器,因为它使用了async/await。如果您需要支持旧版浏览器,您可能需要使用其他方法来处理异步操作。
没有搜到相关的沙龙
领取专属 10元无门槛券
手把手带您无忧上云