1
  1. 使用 Firefox 10.0.2 从此项目中打开 Framework.html：http ://code.google.com/p/unitspeeds-vhh/ （编辑：我现在正在预加载图标。如果您愿意，请使用此修订版尝试调试原始问题。）
  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);

    }
4

1 回答 1

0

您是否尝试过更改此设置，以便它等待调用 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

于 2012-04-16T21:07:38.793 回答