Javascript image.onload() 保证图像已加载？

Question

我正在开发一款使用大量图像的 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;
}

Answer 1

是的，但据我所知:

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

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

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

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

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