이미지가 jQuery (또는 일반 자바 스크립트)에로드되었는지 확인

Question

이미지로드가 완료되면 트리거되는 jQuery에 load() 이벤트가 있음을 알고 있습니다. 그러나 이후에 이벤트 처리기가 에 첨부 된 경우 이미지로드가 완료됩니다.

이미지가 이미로드되었는지 확인하려면 $('#myimage').isLoaded()과 같은 속성이 있습니까?

Answer 1

이미지의 complete 속성을 확인할 수 있습니다.

이미지가 이미로드되었는지 확인하려면 $('#myimage').isLoaded()과 같은 속성이 있습니까?

아니,하지만 당신은 컬렉션의 모든 이미지가로드 된 경우 너무 :)

jQuery.fn.isLoaded = function() { 
    return this 
      .filter("img") 
      .filter(function() { return this.complete; }).length > 0; 
}; 

이 true을 생산하는 것입니다 할 수 있으며, false 경우 하나 개 이상의 이미지는 아니 었습니다. 당신은 당신의 필요에 맞게 그것을 적용 할 수 있습니다.

Answer 2

그것 조금 hackish와 나는 그것이 어디에나 작동 할 것이라는 점을 확신하지 않는다. 직접 테스트하십시오.

$.fn.isLoaded = function(message) { 
    var $this = $(this); 
    if($this.height() > 0 && $this.width() > 0){ 
    return true; 
    } 
    return false; 
}; 

$('#myimage').isLoaded() 

편집 :

이 FF와 크롬에서 작동,

$.fn.isLoaded = function(message) { 
    var $this = $(this); 
    $this.hide(); // becaues firefox gives a 24*24 dimension 
    var w = this[0].width; 
    var h = this[0].height; 
    $this.show(); 
    if(w > 0 || h > 0){ 
    return true; 
    } 
    return false; 
}; 
console.log($('#myimage').isLoaded()); 

하지만 당신은 즉, 이미지를 숨기 즉 실패 있도록, 폭과 높이로 0을 제공합니다. 즉, 당신은 이미지를 숨겨서는 안됩니다.

누군가가 크로스 브라우저를 만들기 위해이 두 가지 기능을 결합하거나 누군가에게 도움이되기를 바랍니다.

Answer 3

일반 JS로 충분합니다. 이미지 객체는 완전한 속성을가집니다. 여기에서 확인하십시오 : http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_img_complete