檢查游戲循環之前是否加載了圖像

Question

到目前為止，我的程序按照我想要的方式工作。 這很好用：

// Player object
var player = {
   x: 10,
   y: 10,
   draw: function () {
       ctx.drawImage(playerImg, 0, 0);
   ...

1. 我應該檢查是否playerImg加載了playerImg ，即使它到目前為止工作正常嗎？

2. 另外，檢查的最佳方法是什么。 我正在考慮將所有圖像放在一個數組中。 然后使用onLoad函數進行檢查。 如果它們都已加載，那么我將開始游戲循環。 這是一個好主意嗎？

謝謝

Answer 1

圖像加載如何工作

您需要檢查圖像是否已加載，因為圖像加載是異步的。 您可能會遇到代碼有時無法正常工作的情況。 這主要是因為您的圖像存在於緩存中，並且瀏覽器能夠在調用drawImage之前足夠快地加載它，或者圖像存在於本地磁盤上。

但是，新用戶需要先下載數據，並且您不希望首次使用的用戶遇到錯誤，例如由於未完成加載而未顯示圖像。

因為它是異步的，所以當圖像加載在后台進行時 ，代碼將繼續執行。 這可能導致您的代碼在圖像加載完成之前執行。 因此處理圖像加載很重要

處理多個圖像

您可以先加載所有圖像（或需要以其開頭的圖像），然后可以使用數組定義它們：

var imageURLs = [url1, url2, url3, ...],
    images = [],
    count = imageURLs.length;

然后迭代並創建圖像元素：

for(var i = 0; i < count; i++) {

    /// create a new image element
    var img = new Image();

    /// element is valid so we can push that to stack
    images.push(img);

    /// set handler and url
    img.onload = onloadHandler;
    img.src = imageURLs[i];

    /// if image is cached IE (surprise!) may not trigger onload
    if (img.complete) onloadHandler().bind(img);
}

並在回調函數中執行庫存計數：

function onloadHandler() {
    /// optionally: "this" contains current image just loaded
    count--;
    if (count === 0) callbackDone();
}

回調是您接下來要執行的代碼。 您的圖像將以與imageURLs相同的順序出現在數組images中。

對於生產，還應該合並一個onerror處理程序，以防出現問題。