Javascript 仅在刷新后渲染或根本不渲染位图

我使用createjs实现了一个由单元格组成的网格：

function Cell(identifier,color,gridPositionVector,canvasPositionVector,width)
{
    this.identifier = identifier;
    this.color = color;
    this.gridPositionVector = gridPositionVector;
    this.canvasPositionVector = canvasPositionVector;
    this.width = width;

    var square = new createjs.Shape();
    square.graphics.beginFill(color).drawRect(0, 0, width, width);
    square.x = this.canvasPositionVector.X();
    square.y = this.canvasPositionVector.Y();
    square.name = "square";
    stage.addChild(square);
    stage.update();

}

Cell.prototype.GetGridPositionVector = function () { return this.gridPositionVector; };

function Vector2(x,y)
{
    this.x = x;
    this.y = y;
}

Vector2.prototype.X = function () { return this.x; };
Vector2.prototype.Y = function () { return this.y; };

function Grid()
{
    this.cellArray = [];
    this.gridArray = [   ['o', 'o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x'],
                         ['x', 'o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'o', 'x', 'o', 'o', 'o', 'o', 'x', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'x', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o'],
                         ['o', 'o', 'o', 'o', 'o', 'o', 'o', 'x', 'x', 'o', 'o', 'o', 'o'],
                         ['x', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'o', 'x']];

    for (var i = 0; i < this.gridArray.length; i++) {
        var row = this.gridArray[i];
        for (var j = 0; j < row.length; j++) {
            switch (row[j]) {
                case 'o':
                    var cell = new Cell('o', 'green', new Vector2(i, j), new Vector2(j * cellWidth, i * cellWidth), cellWidth); 
                    this.cellArray.push(cell);
                    break;
                case 'x':
                    var cell = new Cell('o', 'blue', new Vector2(i, j), new Vector2(j * cellWidth, i * cellWidth), cellWidth); 
                    this.cellArray.push(cell);
                default:

            }
        }
    }
}

Grid.prototype.GetGridArray = function () {
    return this.gridArray;
}

在我的init函数（称为onLoad）中，我调用了显示网格和爬行所需的一切

var stage;

var cellWidth = 50;

function init()
{
    stage = new createjs.Stage("DisplayCanvas");
    // to get onMouseOver & onMouseOut events, we need to enable them on the stage:
    stage.enableMouseOver();

    var cellGrid = new Grid();

    var creepTex = new createjs.Bitmap("creep.png");
    console.log(creepTex.id);

    var creep = new Creep('creep1', new Vector2(9, 9), creepTex);
}

到目前为止，一切都按其应有的方式显示。然后我在我的TFS项目中签入了该项目。在另一台机器上下载最新版本后，出现以下问题：

爬行图像不再显示

我试过调试和记录，似乎一切正常

我还尝试用

http://localhost:59271/creep.png

。将在浏览器中找到并显示图像

如果我在Firefox中运行该项目，则不会显示图像。只有当我刷新页面时，它才会突然出现。这只适用于Firefox。在IE10和Chrome中，即使在刷新或清除缓存后，它也不会显示

---

这对我来说是一个谜，因为在我的另一台开发人员机器上，一切正常，爬行图像显示正常。

如果使用字符串路径添加图像，它必须在后台创建并加载图像。即使它缓存在浏览器中，也不会立即可用。您可以通过以下方式解决此问题：

侦听图像上的负载，并更新阶段

不断更新舞台（准备好后会显示）

使用类似的内容预加载内容，并将图像引用传递到位图

以下是最简单的方法：

var img = new Image();
img.onload = function() {
    stage.update();
}
img.src = "creep.png";
var creepTex = new createjs.Bitmap(img);

---

希望这是有意义的。

通过在后台添加勾号功能并不断更新，解决了这个问题。

var img = new Image();
img.onload = function() {
    stage.update();
}
img.src = "creep.png";
var creepTex = new createjs.Bitmap(img);