CreateJS - 图像位图并不总是显示

Question

我怀疑答案会在 PreloadJs, however, I've removed my tinkering around with it in my code 中以简化它。这是最重要的部分：

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

所以现在的问题是，这就是你第一次运行我的代码后得到的结果：

没问题。

但是，您第一次访问时，图像还没有被缓存，并且没有显示。当您硬重置页面（ctrl + r on windows）时，也会发生同样的事情。这显然是一件大事，因为您第一次访问该页面时，它不会有图像。这是我尝试过的：

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 一秒钟后再次是不够好。

Note: I do not believe this to be a duplicate of this question as there are no answers, it is a year old, they were unable to give some details, and the only solution offered in the comments failed.

Answer 1

当您调用 stage.update 时，您的图片未加载。即使你预加载它，如果你将一个字符串路径传递给 Bitmap，它仍然需要时间来初始化，但即使它只是几毫秒，你已经要求舞台在它准备好之前绘制。

解决方案是在图像完成后绘制，并确保使用图像，而不是字符串路径。

修复您的代码：

let stage = new createjs.Stage('easel'),
bitmap = new createjs.Bitmap('http://www.skrenta.com/images/Whosebug.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

CreateJS - 图像位图并不总是显示

CreateJS - Image bitmap doesn't alway show up

javascript

image

bitmap

easeljs

preloadjs