동적으로로드 된 이미지 반환 outerHeight 0 (jQuery)

Question

어떤 이유로 인해 .load 메서드가 작동하지 않는 것 같습니다. 여기 내 JQuery와의 :

$(document).ready(function() { 
    var imgHeight; 
    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />'); 
    if($('img.select').prop('complete')) { 
     imgHeight = $('img.select').outerHeight(); 
    }else{ 
     $('img.select').load(function() { 
      imgHeight = $('img.select').outerHeight(); 
     });  
    } 
    $('body').prepend('<p>Image Height: ' + imgHeight + '</p>'); 
}); 

및 예 후 jsfiddle

에 대한 링크가 몇 번을 실행 (나는 이미지가 캐시 가정) 성공적 정확한 높이를 검색합니다. 이것은 if($('img.select').prop('complete'))이 제대로 작동하고 있음을 알려줍니다.

무엇이 여기에 있습니까?

(크롬과 FF 테스트)

편집 : 좋아, 지금은 그들이로드하는 경우 하나 개 이상의 이미지를 확인하려면 어떻게? $('img.select').prop('complete')은 선택기와 일치하는 첫 번째 요소 만 테스트합니다. http://jsfiddle.net/hcarleton/2Dx5t/6/

Answer 1

one()를 사용하는 대신 load()

load()이 aysnchronous입니다되지하도록 업데이트, 그래서 전에 imgHeight의 값을 설정하지 않습니다

편집$('body').prepend('<p>Image Height: ' + imgHeight + '</p>');에 전화하세요. . 또한 load() 이벤트 핸들러 함수는 jQuery 1.8에서 사용되지 않습니다.

.select 클래스가있는 이미지의 경우 위임로드 수신기를 본문에 첨부하는 것이 가장 좋습니다. 해당 이벤트 핸들러의 콜백에서 이미지 높이를 감지 할 수 있습니다.

$(document).ready(function() { 
    $('body').one('load', 'img.select', function(e) { 
     var imgHeight = $('img.select').outerHeight(); 
     $('body').prepend('<p>Image Height: ' + imgHeight + '</p>'); 
    });  

    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />'); 
}); 

Answer 2

사용이 대신 :

SEE DEMO

$(document).ready(function() { 
    var imgHeight; 
    $('body').prepend('<img src="http://farm9.staticflickr.com/8266/8653931785_4a8d43164f.jpg" class="select" />'); 
    $("img").one('load', function() { 
     imgHeight = $(this).outerHeight(); 
     $('body').prepend('<p>Image Height: ' + imgHeight + '</p>'); 
    }).each(function() { 
     if (this.complete) $(this).load(); 
    }); 

});