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

发布于 2025-01-05 03:18:49 字数 426 浏览 1 评论 0原文

我想尝试在加载多个图像时为它们设置一个进度条,但无法使其正常工作。我有几个预加载的图像,例如:

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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

冰雪之触 2025-01-12 03:18:49

图像上的 js onload 事件是一团乱麻。不同的浏览器处理方式不同,不同版本(主要是IE)处理方式也不同。另外,大多数浏览器都有不确定的错误。

这是一个简短的清单:

  1. 在设置 src 之前设置 onload。 (等等,它会变得更奇怪......)
  2. 也处理 onerror。
  3. 处理已经缓存的图像。有时它们不会开火,而有时它们会立即开火。
  4. 使用通用的腰带 setTimeout() 函数来轮询以查看图像是否已在 DOM 中获得宽度或高度。在不同的浏览器/版本中,这样做的方式有所不同,这意味着您必须使用特征检测,从naturalWidth开始,然后在image.width之前继续使用getAttribute(width)。

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

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:

  1. set your onload BEFORE you set your src. (Wait for it, it will get quirkier...)
  2. Handle onerror as well.
  3. Handle images that already was cached. Sometimes they will not fire onload, while other times they will fire and do so imediately.
  4. Use a generic belt-and-suspenders setTimeout()-function that polls to see if the image has gotten a width or height in the DOM. This is done differently in different browsers/versions, which means you'll have to use feature detection, starting with naturalWidth, then move on to getAttribute(width) before image.width.

And then you will still probably have some bugs... but you will only know if you test all browser/versions you intend to support.

阳光下的泡沫是彩色的 2025-01-12 03:18:49

作为参考,错误是 Noah 调用每个函数并将结果分配给 onload。本来应该是:

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

For reference, the error was that Noah was calling each function and assigning the result to the onload. It should have been:

Image1.onload = moveProgressBar; // note the lack of ()
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文