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

남아 라인 : 잘못 즉시 this.onLoad를 호출

img.onLoad = this.onLoad(img); 

, 신속한 r 그 함수를로드 핸들러로 전달하는 것보다. 따라서 이미지가 실제로로드 될 때까지 기다리지 않고 코드가 완료됩니다.

또한 대소 문자를 잘못 처리했습니다. 처리기 속성은 img.onLoad이 아닌 img.onload이어야합니다. 해당 이벤트 핸들러 내부 (이미지가 아닌 클래스를 나타내는) this을 사용하도록 .onload 이벤트 처리기는 그 this 컨텍스트 변수로 이미지보다는 매개 변수로 통과 한 호출됩니다

참고.

대안은 작성하는 것입니다 :

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