动态加载的图像返回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'))工作正常。

我在这里错过了什么？

（在Chrome和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>'); 。此外，从jQuery 1.8起，不推荐使用load()事件处理函数。

最好是将一个委派的负载监听器附加到任何图像的主体上，使用.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(); 
    }); 

});