预加载图像进度条的加载问题
我想尝试在加载多个图像时为它们设置一个进度条,但无法使其正常工作。我有几个预加载的图像,例如:
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() 函数。即使在访问没有缓存和有缓存的页面时也会发生这种情况。我错过了什么吗?任何帮助将不胜感激。
I would like to try and set up a progress bar for several images while their loading and haven't been able to get it to work. I have several images that are preloaded like:
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;
Something weird is happening since they're immediately running the moveProgressBar() function even though the images aren't entirely loaded yet. This happens even when approaching the page with no cache and with cache. Am I missing something? Any help would be appreciated.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
图像上的 js onload 事件是一团乱麻。不同的浏览器处理方式不同,不同版本(主要是IE)处理方式也不同。另外,大多数浏览器都有不确定的错误。
这是一个简短的清单:
然后你可能仍然会遇到一些错误......但只有测试你打算支持的所有浏览器/版本你才会知道。
The js onload event on images is a big messy mess. Different browsers handle it differently, and different versions (mostly IE) handle it differently. Plus, most browsers have iffy bugs.
Here is a short checklist:
And then you will still probably have some bugs... but you will only know if you test all browser/versions you intend to support.
作为参考,错误是 Noah 调用每个函数并将结果分配给 onload。本来应该是:
For reference, the error was that Noah was calling each function and assigning the result to the onload. It should have been: