Question

我想尝试在加载时为多张图片设置一个进度条，但无法让它工作。我有几个预加载的图像：

var Image1 = new Image();
var Image2 = new Image();
var Image3 = new Image();

Image1.onload = moveProgressBar();
Image2.onload = moveProgressBar();
Image3.onload = moveProgressBar();

Image1.src = url;
Image2.src = url;
Image3.src = url;

发生了一些奇怪的事情，因为它们立即运行moveProgressBar（）函数，即使图像尚未完全加载。即使在没有缓存和缓存的情况下接近页面时也会发生这种情况。我错过了什么吗？任何帮助将不胜感激。

Answer 1

图像上的js onload事件是一个混乱的混乱。不同的浏览器以不同的方式处理它，不同的版本（主要是IE）以不同的方式处此外，大多数浏览器都有不确定的错误。

这是一份简短的清单：

在设置src之前设置你的onload。（等等，它会变得怪异......）
处理恐怖事件。
处理已缓存的图像。有时它们不会发射，而其他时候它们会发射并立即发射。
使用通用的腰带和吊带setTimeout（） - 轮询功能以查看图像是否在DOM中获得了宽度或高度。这在不同的浏览器/版本中以不同的方式完成，这意味着您必须使用特征检测，从naturalWidth开始，然后在image.width之前移动到getAttribute（width）。

然后你仍然可能会有一些错误...但你只会知道你是否测试了你想要支持的所有浏览器/版本。

Answer 2

作为参考，错误是Noah正在调用每个函数并将结果分配给onload。应该是：

Image1.onload = moveProgressBar; // note the lack of ()

预加载图像的进度条的上载问题

2 个答案: