Question

我使用以下代码在将所有图像绘制到画布上之前等待所有图像加载。这在Firefox中效果很好，当我直接在Chrome的地址栏中输入页面的网址时效果很好。但是，当我尝试使用Chrome中的刷新按钮时，图片无法加载。

    var need_to_load = 2;
    var items = 0;

    function item_loaded() {
            items +=1;
            if (items >= need_to_load) {
                    context.drawImage(router_pic,router_x,router_y,80,80);
                    context.drawImage(switch_pic,router_x,switch_y,60,60);
            }
    } // end item_loaded

    var router_pic = new Image();
    router_pic.src = "images/router.png";
    router_pic.onload = item_loaded();
    var switch_pic = new Image();
    switch_pic.src = "images/switch.png";
    switch_pic.onload = item_loaded();

有人能指出我为什么以及如何让这项工作与Chrome合作？

我意识到在这种情况下我可以摆脱item_loaded（）函数，但是我有另一个更复杂的画布绘图，在将它们绘制到画布之前等待所有图像加载是最有意义的。

Chrome版本为33.0.1750.152，如果这有任何区别的话。

Answer 1

您目前正在使用onload处理程序错误。它只需要对处理程序的引用 - 这里将返回那些函数的结果。

只需更改以下行：

router_pic.onload = item_loaded;  //no parenthesis
switch_pic.onload = item_loaded;

我还建议使用src行切换onload行，这样src就会出现。

希望这有帮助！

html5 canvas drawImage未在Chrome中加载

1 个答案: