Растровые воспроизведен только после обновления или не отображается на всех

Question

я реализовал сетку, состоящую из клеток с помощью 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; 
} 

Я также реализовал Creep.js, который отображает изображение:

function Creep(id, gridPositionVector, texture) 
{ 
    this.id = id; 
    this.texture = texture; 

    this.texture.x = gridPositionVector.X() * 50; 
    this.texture.y = gridPositionVector.Y() * 50; 

    stage.addChild(this.texture); 
    stage.update(); 
    console.log('creep created and added.'); 
} 

В моя функция 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-проекте. После загрузки последней версии на другой машине возникает следующая проблема:

1. Изображение ползучести больше не отображается.
2. Я пробовал отлаживать и регистрировать, все, кажется, работает правильно.
3. Я также попытался вызвать изображение напрямую с http://localhost:59271/creep.png. Изображение найдено и отображается в браузере.
4. Если я запускаю проект в Firefox, изображение не отображается. Только если я обновляю страницу, она внезапно появляется. Это работает только в Firefox. В IE10 и Chrome он не отображается даже после обновления или очистки кеша.

Это загадка для меня, потому что на моей другой машине для разработчиков все работает нормально, и изображение ползучести отображается так, как должно.

Answer 1

Если вы добавляете изображение с использованием строкового пути, оно должно создавать и загружать изображение в фоновом режиме. Даже если он кэшируется в браузере, он не будет доступен сразу. Вы можете обойти эту проблему:

1. Listening для нагрузки на изображении, и обновляя этап
2. Обновления сцены постоянно (он будет отображаться, когда он будет готов)
3. Предзагрузки контента, с нечто вроде PreloadJS, прохождения мимо изображения ссылка на растровое изображение.

Вот самый простой подход:

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

Надежда, что имеет смысл.