Javascript image.onload() 保证图像被加载？答案

【问题标题】：Javascript image.onload() guarantees image is loaded?Javascript image.onload() 保证图像被加载？
【发布时间】：2014-01-10 05:19:20
【问题描述】：

我正在开发一个使用大量图像的 HTML5 游戏。但是，有时游戏无法正确加载并抛出一些错误消息，提示某些图像未正确加载。我使用预加载函数，在开始设置图像的 src 之前递增一个变量，并在 onload() 函数中递减它。只有当这个变量达到 0 时，我才开始绘图。有时我（和其他用户）仍然会看到错误并且游戏无法加载。大多数时候它虽然有效。现在我想知道......从技术上讲，这应该是不可能的。 onload 函数的调用是否保证图像被加载？因为我觉得没有。

这里的代码虽然我不认为这很重要：

var ressourcesToLoad = 1;

// all the loadImage() calls
// ...

ressourceLoaded();


function ressourceLoaded()
{
    ressourcesToLoad--;

    // if(ressourcesToLoad == 0) start main loop
}


function loadImage(imgFile)
{
    ressourcesToLoad++;
    var img = new Image();
    img.onload = ressourceLoaded();
    img.src = imgFile;
    return img;
}

【问题讨论】：

你在哪里调用loadImage函数？
仍然有时我（和其他用户）看到错误并且游戏无法加载 - 这些错误是什么？你能给个网址或小提琴或你的游戏吗
@putvande 位于第 3 条评论行
你可以尝试使用 $(window).load(function() 吗？这里所有资源都加载完毕，你可以开始你的游戏了

标签： javascript html image

【解决方案1】：

是的，但据我所知：

1 在某些浏览器中，它可以为同一张图片连续触发两次

2 在某些浏览器中，从缓存加载图像时它不会触发

3 我不确定当服务器为图像返回 404 时它是否会触发

也许你应该在加载上一张图片后才开始加载下一张图片。如果您在同一个域中有很多大图像并同时开始加载它们，那么“每页两个连接”规则可能会破坏您的某些东西。

P.S.：某些“某些浏览器”是指“某些浏览器或其过时版本”。

【讨论】：

并行加载它们有什么问题，什么会中断？它会明显更快，因为它在现代浏览器中更像是 4/6/8/16-connections-per-server 规则。
好吧，如果您确定您的访问者使用“现代浏览器”，您绝对可以这样做。我只是警告说这些问题可能会发生。 P.S.：我不是“缺少”HTML5 部分，我只是在回答有关 image.onload() 的一般性问题。 P.P.S.：但是，糟糕的互联网连接或 200 张 5Mb 大小的图像足以占用所有 4/6/8/16 连接（以及“超时杀死”所有其他连接）。
你的意思是如果旧浏览器在太少的连接上加载了太多的资源就会超时？有趣，我不知道。
我说“排队”。如果您尝试同时启动 32 个连接，则只会打开前 4/6/8/16。直到其中一个关闭，其他留在队列中并且可以在握手之前超时。它发生例如当您同时使用太多 XMLHTTP 请求时。

【解决方案2】：

不，如果图像已完成加载，complete 属性会更准确地告诉您。不幸的是，加载完成后不会触发任何事件。一种方法是轮询此属性，直到将其设置为 true。

【讨论】：