JS를 사용하여 4 개의 이미지가로드 된시기를 결정하는 방법이 있습니까?

Question

페이지에 4 개의 이미지가 있습니다. 4 개의 이미지가 모두로드되면 JS 이벤트를 트리거하려고합니다. 물론 이미지를로드 할 순서를 알 수 없으므로 마지막 이미지에서 이벤트를 트리거 할 수 없습니다. 한 가지 생각은 카운터를 갖는 것이었지만 매 200ms마다 check()하는 setTimeout() 아이디어가 좋지 않기 때문에 해당 카운터가 4와 같은지 확인하는 가장 좋은 방법을 생각할 수 없습니다.

다른 아이디어?

사이트에서 jQuery를 사용하고 있으므로 도움이 될 수 있습니다.

이

이미지의 HTML 코드 :

<img src="/images/hp_image-1.jpg" width="553" height="180" id="featureImg1" /> 
<img src="/images/hp_image-2.jpg" width="553" height="180" id="featureImg2" /> 
<img src="/images/hp_image-3.jpg" width="553" height="180" id="featureImg3" /> 
<img src="/images/hp_image-4.jpg" width="553" height="180" id="featureImg4" /> 

Answer 1

count=0; 
$("img").load(function() { 
    count++; 
    if(count==4) { //All images have loaded 
     //Do something! 
    } 
}); 

Answer 2

Salty's example에 관해서는, 그러한 같은 전역 변수를 피하기 위해 폐쇄를 사용하는 것이 가장 좋습니다 :

$("img").load(function() {  
    var count = 0, numImages = $("img").size(); 

    return function() { 
     if (++count === numImages) { 
      //All images have loaded  
     } 
    }; 
}()); 

[편집]

as jeroen's comment에서 하드 코드 된 값 4 (count === 4)를 jQuery size 함수로 대체하여 함수 내에서 더 많은 유연성을 허용했습니다.