jQuery：如何檢測LI元素是否被加載？

Question

所以我得到了以下HTML：

<div id="featured"> 
    <ul> 
     <li><img src="<?php echo get_bloginfo('stylesheet_directory') . '/images/tmp-featured-1.jpg'; ?>" /></li> 
     <li><img src="<?php echo get_bloginfo('stylesheet_directory') . '/images/tmp-featured-2.jpg'; ?>" /></li> 
     <li><img src="<?php echo get_bloginfo('stylesheet_directory') . '/images/tmp-featured-3.jpg'; ?>" /></li> 
     <li><img src="<?php echo get_bloginfo('stylesheet_directory') . '/images/tmp-featured-4.jpg'; ?>" /></li> 
    </ul> 
</div> 

當我使用：

$(function(){ 
    $('#featured').init(); 
}); 

要觸發代碼。內容（在這種情況下，只有單個img元素，但可以更多，如元數據或視頻）尚未加載。結果，在init中調用時的寬度和高度將返回0,0。我跟蹤該值，一旦圖像加載，li將相應地調整大小。我試着做類似：

$('#featured ul li').load(function() { 
    alert('its loaded'); 
}); 

但它不起作用。任何人有想法？

Answer 1

而不是使用$(function() {綁定到該文件準備好處理的，使用$(window).load()因爲這火onces所有圖像加載：

$(window).load() { 
    $('#featured').init(); 
});