javascript - 为什么这些 HTML5 图像的渲染(或不渲染!)取决于我刷新的速度？

Question

1. 使用 Firefox 10.0.2 打开此项目中的 Framework.html:http://code.google.com/p/unitspeeds-vhh/ (编辑:我现在正在预加载图标。如果您想尝试调试原始问题，请使用 this revision。)
2. 按 F5 刷新。
3. 快速地再按几次 F5。

预期:单元图标(代码中的unitIconObj)应始终呈现。
实际:它们永远不会在第一个页面加载时呈现。首先F5通常会显示所有图标。快速重复 F5 会导致大多数(但不是全部)图标显示。

我试图解决的基本问题是图标第一次无法正确渲染，我认为这意味着我需要预加载图像。我一直在尝试几种不同的方法来做到这一点，但这种行为并不是严格可重现的，而且我认为我对刷新和缓存还不够了解，无法自己解决这个问题。图标本身是非常小的图像文件，所以我很惊讶地发现这是一个问题。

非常抱歉乱七八糟的代码和问题——我是个菜鸟!欢迎任何建议。

编辑:这是我加载图像文件并渲染它的部分:

for (var x = 0; x < sortedOutput.length; x++)
    {
        // Draw the unit icon 
        var unitIconObj = new Image();
        if (sortedOutput[x].Filename == "--") // I don't have real icons for a few units
        {
            unitIconObj.src = "Icons/Creep.jpg";    
        } else 
        {
            unitIconObj.src = "Icons/" + sortedOutput[x].Filename + ".jpg";
        }
        speedContext.drawImage(unitIconObj, ChartBuffer+textBlock+2+4*iconSpace, 50+(x*iconSpace), BarHeight, BarHeight);

    }

Answer 1

您是否尝试过更改此设置，以便它等待调用drawImage函数，直到图像上的onload事件触发。这将确保在任何其他魔法发生之前加载图像。

for (var x = 0; x < sortedOutput.length; x++)
    {
    var unitIconObj= new Image();  
    unitIconObj.onload = function(){  

          speedContext.drawImage(unitIconObj, ChartBuffer+textBlock+2+4*iconSpace, 50+(x*iconSpace), BarHeight, BarHeight);  

    };  
    if (sortedOutput[x].Filename == "--") // I don't have real icons for a few units
        {
            unitIconObj.src = "Icons/Creep.jpg";    
        } else 
        {
            unitIconObj.src = "Icons/" + sortedOutput[x].Filename + ".jpg";
        } 
   }

在这里找到这个:https://developer.mozilla.org/en/Canvas_tutorial/Using_images