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。這將對硬重置起作用，但是當我清除緩存時，它加載花費的時間太長，基本上破壞了修復第一個負載的整個想法。

所以基本上，而這些解決方案的同時，他們的工作在某些時候，有些是hackish的，所有的工作只是一個百分比，或者更少的時間。什麼是最好的解決方案？

的一件事是，當我做一些事情，比如調整大小的頁面，圖像會顯示出來。我無法在我的示例代碼中重新創建它。我相信這事，因爲當我最初運行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