CreateJS - Растровое изображение изображения не появляется всегда

Question

Я подозреваю, что ответ будет лежать в PreloadJs, однако я удалил свою работу с ним в своем code, чтобы упростить его. Вот самая важная часть:

let stage = new createjs.Stage('easel'), 
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg'); 
stage.addChild(bitmap); 
stage.update(); 

Итак, теперь проблема, это то, что вы получаете, когда вы запустите свой код после того, как в первый раз:

ничего плохого.

Однако в первый раз, когда вы посетили, изображение не кэшировано, но оно, и не отображается. То же самое происходит, когда вы делаете жесткий сброс страницы (ctrl + r на окнах). Это, очевидно, большое дело, потому что при первом посещении страницы у него не будет изображений. Вот то, что я пробовал:

• PreloadJs, это, скорее всего, будет решение, но с моим кодом до сих пор это не работает.

  • Это мой текущий PreloadJS код:

    queue.on('complete', draw, this) 
    queue.load(imageUrl) 
    
    function draw() { 
        let bitmap = new createjs.Bitmap(imageUrl); 
        stage.addChild(bitmap); 
        stage.update(); 
    } 
    

• Срабатывание мой код onload. Проблема все еще возникает.

• Задержки, такие как setTimeout. Помимо того, что он чрезвычайно хакерский, он только фиксирует его в процентах от времени, даже с огромными задержками.
• Вещи вроде этого answer. Это будет работать для жестких сбрасываний, но когда я очистил свой кеш, он слишком долго загружался, в основном подрывая всю идею фиксации первой загрузки.

В основном, хотя некоторые из этих решений пока они работают некоторое время, некоторые из них хаки и все работают только в процентах или меньше времени. Какое лучшее решение?

Одно дело в том, что когда я что-то делаю, например, изменяя размер страницы, изображение будет отображаться. Я не смог воссоздать это в своем примере кода. Я считаю, что это произошло потому, что, когда я изначально бежал stage.update, он не был готов показать, так что это не так. Снова просто бежит stage.update снова второй раз недостаточно.

Примечание: Я не считаю, что это дубликат этого question, пока нет ответов, это год, они были не в состоянии дать какие-то детали, и единственное решение, предложенное в комментариях не смогли.

Answer 1

Ваше изображение не загружено, если вы звоните stage.update. Даже если вы предварительно загрузите его, если вы передадите строковый путь к растровому изображению, все равно потребуется время для инициализации, но даже если его миллисекунды всего лишь миллисекунды, вы попросили сцену рисовать, прежде чем он будет готов.

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

Чтобы исправить код:

let stage = new createjs.Stage('easel'), 
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackoverflow.jpg'); 
stage.addChild(bitmap); 
bitmap.image.onload = function() { 
    stage.update(); 
} 

Чтобы исправить код предварительной загрузки:

queue.on('complete', draw, this) 
queue.load(imageUrl) 

function draw() { 
    let bitmap = new createjs.Bitmap(queue.getResult("imgId")); // Reference 
    stage.addChild(bitmap); 
    stage.update(); 
} 

Вот более полный ответ: easeljs not showing bitmap