Javascript：圖像對象似乎沒有加載圖像

我試圖創建圖像對象，爲我的每個.png遊戲資產創建一個。 makeImage()圖像製作者確實創建了正確的對象，並且它具有正確的路徑作爲其.src屬性，但它不會加載圖像。 img.isReady仍然是false。Javascript：圖像對象似乎沒有加載圖像

我是一個JavaScript和編碼的初學者，我不知道是否有一些我忽略的函數或對象的行爲。

var assets = {}; 

function makeImage(path) { 
    var img = new Image(); 
    img.isReady = false; 
    img.onload = function() { 
     img.isReady = true; 
    }; 
    img.src = path; 
    return img; 
} 

assets.tileset = makeImage('images/tileset.png');

來源

2014-09-28 NebulaSpex

如何，什麼時候檢查'isReady'財產？你瀏覽器的開發者控制檯中的任何錯誤？ – 2014-09-28 23:44:43

'isReady'我以後會在渲染時使用。我不使用開發者控制檯，但我只是嘗試過，沒有什麼突出的。只是似乎是''window.controllers»''的無關評論被廢棄了。 – NebulaSpex 2014-09-28 23:55:10

工作小提琴：http://jsfiddle.net/anjrLy40/1/

的問題是，你的圖像加載，這是一個asyncronous過程之前返回圖像img。您應該在onload函數中嵌套返回。試試這個：創建

function createImg(path, nodeID) { 

    var img = new Image(), 
     isLoaded = false; 

    img.onload = function() { 

     document.getElementById(nodeID).appendChild(img); 

     isLoaded = true; 

     alert(isLoaded); 
    }; 

    img.src = path; 
};

的功能和連接到IMG object，一旦你設置path運行和過程完成。在某些人的代碼中創建函數之前，您會看到src，但這不是首選的方法。

參考：http://fragged.org/preloading-images-using-javascript-the-right-way-and-without-frameworks_744.html

來源

2014-09-29 00:14:49 bencripps

這解決了它。非常感謝。你能否詳細說明異步過程？是什麼讓設置一個源圖像的路徑與其他值不同？ – NebulaSpex 2014-09-29 00:38:58

JavaScript是一種單線程語言。即使圖像未附加到DOM，只要您設置了「src」，瀏覽器就可以加載圖像。這有時被稱爲「延遲加載」。所以，當你設置圖像源時，雖然你只是給對象附加一個「字符串」，但瀏覽器實際上是加載圖像本身，這可能需要一些時間，具體取決於圖像的大小。因此，瀏覽器異步執行此操作，以允許其他進程同時運行。你應該看看Ajax，並承諾。他們會證明我非常有幫助，歡呼！ – bencripps 2014-09-29 00:46:00

再次感謝。會做。 – NebulaSpex 2014-09-29 01:20:46

Javascript：圖像對象似乎沒有加載圖像

回答

相關問題