정적 이미지에 대한 이미지로드

Question

image onload가 작동하려면 onload 핸들러가 첨부 된 후에 src를 설정해야한다는 것을 알고 있습니다. 그러나 내 HTML에 정적 인 이미지에 onload 처리기를 첨부하고 싶습니다.

<img id='img1' src='picture.jpg'> 

$('#img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('img1').attr('src')); 

그러나 이것은 오히려 못생긴 그리고 그것은 단지 하나의 일치 선택기 할 수있는 명백한 흐름이 있습니다 지금은 다음과 같은 방법으로 (jQquery 사용) 그렇게 영상. 이 작업을 수행하는 다른 좋은 방법이 있습니까?

편집
나는 그것이 단지 하나의 이미지 만이 수행 할 때이다 일치 선택을 위해 할 수있는 무슨 뜻인지 :

<img class='img1' src='picture.jpg'> 
<img class='img1' src='picture2.jpg'> 

$('.img1').load(function() { 
alert('foo'); 
}) 
.attr('src', $('.img1').attr('src')); 

을 그 두 이미지 것 have src = 'picture.jpg'

Answer 1

직접 .trigger() 또는 .load()를 호출하여 (또는 핸들러의) 이벤트를 트리거 할 수 있습니다. 당신은 이미지가 이미로드 것을 알고 있기 때문에 당신이 이벤트를 원하는 것을 알고있는 경우

, 당신은 이런 식으로 작업을 수행 할 수 있습니다

$('#img1').load(function() { 
    alert('foo'); 
    }) 
    .trigger('load'); // fires the load event on the image 

준비가 또는 어떤 순간을 문서에 스크립트를 실행하는 경우 이미지가 또는없는 경우 아직 명확하지이고, 나는이 같은 것을 사용하는 것이 :

$('img.static') 
    .load(function(){ 
    alert('foo'); 
    return false; // cancel event bubble 
    }) 
    .each(function(){ 
    // trigger events for images that have loaded, 
    // other images will trigger the event once they load 
    if (this.complete && this.naturalWidth !== 0) { 
     $(this).trigger('load'); 
    } 
    }); 

는로드 이벤트 거품 (jQuery를 1.3) 그리고 당신이 가능로드 핸들러를 트리거 할 수 있음을주의 할 문서에서 거품을 취소하지 않으면 조기에 img 핸들러.

기록 : img.src=img.src 트리거 솔루션은 불행하게도 Safari에서 올바르게 작동하지 않습니다. src을 # 또는 about : 공백과 같이 다른 것으로 설정 한 다음 다시로드하기 위해 다시 설정해야합니다.

Answer 2

이것이 jQuery 선택기에 관한 질문입니다. 에스. 모든 이미지 요소를 일치 시키려면 선택자로 #img1 대신 img을 사용할 수 있습니다.

Answer 3

이 기능을 원하는 이미지에 클래스를 추가하고 해당 클래스를 jQuery 선택기에서 사용하십시오.

$('.static-image').load(function(){ ... }); 

Answer 4

좋아, Borgars이 플러그인으로 답변을 설정, 여기있다 :

이

$.fn.imageLoad = function(fn){ 
    this.load(fn); 
    this.each(function() { 
     if (this.complete && this.naturalWidth !== 0) { 
      $(this).trigger('load'); 
     } 
    }); 
}