javascript - 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() { 绑定(bind)到文档就绪处理程序，而是使用 $(window).load() 因为一旦所有图像都被触发已加载:

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