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

Question

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

let stage = new createjs.Stage('easel'),
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackru.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, Помимо того, что он чрезвычайно хакерский, он исправляет это только в процентах случаев, даже с огромными задержками.
• Вещи, как этот ответ. Это будет работать для полной перезагрузки, но когда я очистил свой кэш, загрузка заняла слишком много времени, что подорвало саму идею исправления первой загрузки.

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

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

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

Answer 1

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

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

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

let stage = new createjs.Stage('easel'),
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/stackru.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 не показывает растровое изображение