使用 JavaScript 预加载图像时遇到问题

Question

我正在尝试预加载大约 150 个图像，并且我希望能够做两件事...

1) 使用文件名列表预加载图像。 并非列表中的每个文件名都有与之匹配的文件。

例如）pic04.jpg 可能不存在，即使它在列表中。

因此，当我预加载时，如果可能的话，我希望能够弄清楚图像是否存在。

2) 现在该函数只是使用以下命令预加载所有 150 张图像 图片[i] = new Image(); 图片[i].src = "path/to/my/images/" + imageName[i] + ".jpg";

该函数执行速度非常快，但图像似乎没有预加载。 我是否需要做一些事情让网站等到图像加载后再继续？

有任何想法吗？

Answer 1

该函数执行速度非常快，但图像似乎没有预加载。

图像正在异步加载。 该函数完成执行，但浏览器继续在后台加载图像

因此，当我预加载时，如果可能的话，我希望能够确定图像是否存在。

对的，这是可能的。 您可以在 Image 对象上使用 onerror 事件处理程序

var img = new Image();
img.onerror=function(){alert('error: '+this.src);}
img.onload=function(){alert('image loaded: '+this.src);}
img.src='path/to/image.jpg';