jQuery로 이미지로드가 완료된 시점을 확인 하시겠습니까?

Question

determine when an image has finished loading with jQuery 수 있다면, 그것은 정확히 여러 이미지와 동일합니까?

Answer 1

당신은 쉽게 작업을 수행 할 수 있습니다.

function onloadall(images, callback) { 
    var n = 0; 
    for (var i=0; i<images.length; i++) { 
     if (!images[i].width) { 
      n++; 
      images[i].onload = function(){ 
       if (--n==0) callback(); 
      } 
     } 
    } 
    if (n==0) callback(); 
} 

demo

Answer 2

로드되는 각 이미지에 대해 Deferred 개체를 만들어서 배열에 저장합니다. 다음

각 이미지의 .load() 콜백이 호출 될 때

, resolve 관련 이연 객체와 약속의 모든가 해결 된 경우에만 최종 콜백을 호출하는 $.when()를 사용

function onAllLoaded(imgs, callback) { 
    var i, n, a = []; 
    for (i = 0, n = imgs.length; i < n; ++i) { 
     a[i] = $.Deferred(); 
     $(imgs[i]).on('load', a[i].resolve); // not using .onload to avoid clashes 
    } 
    $.when($, a).done(callback); 
} 

이주의 일부에 그 브라우저 (초기 IE?)에서는 .load 콜백이 실제로 발생하는지 확인하기 위해 특별한 조치를 취해야합니다. 이 답변의 범위를 벗어납니다.