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

我想尝试设置一个进度条，用于加载几张图片并且无法使其工作。我有预装像一些图片：预加载图像的进度条Onload问题

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（）函数。即使在接近没有缓存和缓存的页面时也会发生这种情况。我错过了什么吗？任何帮助，将不胜感激。

来源

2012-02-13 Ark-of-Ice

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

这里是一个简短的清单：

设置你的onload之前设置的你的src。（等待它，它会变得更古怪......）
处理onerror以及。
处理已被高速缓存的图像。有时候他们不会开火，而有时他们会开火，并且会立即开火。
使用一个通用的皮带和吊带setTimeout（） - 函数轮询以查看图像是否在DOM中获得宽度或高度。这在不同的浏览器/版本中完成的方式不同，这意味着您必须使用以自然宽度开始的特征检测，然后在image.width之前移动到getAttribute（宽度）。

然后你仍然可能会有一些错误......但你只会知道，如果你测试你打算支持的所有浏览器/版本。

来源

2012-02-13 07:31:13

1）没问题。 2）如果出现错误，我该怎么办？ 3）我如何处理它们以确保它们正确地调用onload？ 4）如果我能得到它们的高度和宽度，这意味着我的形象是正确的？如果找不到它们，我该怎么办？ – 2012-02-13 08:45:53

2）这取决于你的应用程序，但如果它是一个进度条，我认为你想勾划一个进步的进步，因为你的进度否则将失去“99％”，因为一个图像丢失。 4）是的，如果你可以得到宽度或高度，并且它大于0，则加载图像。如果它是0，它尚未加载。如果你无法获得宽度，你有一个奇怪的浏览器。 – 2012-02-14 07:25:32

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

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

来源

2012-06-19 15:22:55 nathan

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

回答

相关问题