onLoad返回0作爲寬度和高度

Question

我試圖構建一個簡單的圖像預加載，它會創建一個圖像元素並存儲它，以便以後可以立即使用它。

我設置這個相當簡單的單例類，我可以使用隨處可見：

var Preloader = (function() { 
var instance = null; 

function PrivateConstructor() { 
    var total = 0; 
    var onComplete = null; 

    this.loadImages = function(images, completeHandler) { 
     total = images.length; 
     onComplete = completeHandler; 

     for(var i = 0; i < images.length; i++) { 
      var img = new Image(); 
      img.onLoad = this.onLoad(img); 
      img.src = images[i]; 
     } 
    } 

    this.onLoad = function(img) { 
     console.log(img); 
     console.log(img.width); 
     console.log(img.height) 
     total--; 

     if(total == 0) onComplete(); 
    } 
} 

return new function() { 
    this.getInstance = function() { 
     if (instance == null) { 
      instance = new PrivateConstructor(); 
      instance.constructor = null; 
     } 
     return instance; 
    } 
} 
})() 

現在，當我用這個和檢查我的寬度和高度，但它仍然0

Preloader.getInstance().loadImages(['https://si0.twimg.com/profile_images/188302352/nasalogo_twitter_bigger.jpg'], function() { 
    console.log('images loaded'); 
}); 

// output 
<img src="https://si0.twimg.com/profile_images/188302352/nasalogo_twitter_bigger.jpg"> 
0 
0 

Answer 1

在這line：

img.onLoad = this.onLoad(img); 

你錯誤地打電話this.onLoad馬上，rathe而不是作爲負載處理程序傳遞該函數。因此，您的代碼無需等待圖像實際加載即可完成。

您也有錯誤的情況 - 處理程序屬性應該被稱爲img.onload而不是img.onLoad。

注意，.onload事件處理程序將圖片作爲this上下文變量，而不是將其作爲參數傳遞被調用，因此會使用this（代表圖像，而不是你的類），該事件處理中。

另一種方法是這樣寫：

var self = this; 
img.onload = function() { 
    self.onLoad(this); 
}