jQuery: How to detect if an LI element is loaded?

Question

So I got the following 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>

When I use:

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

To trigger the code. The content (in this case only single img elements but can be more, such as meta data or videos) is not loaded yet. The result, the width and the height when calling in the init will return 0, 0. I traced the value and as soon as the images are loaded the li will resize accordingly. I tried doing something like:

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

But it does not work. Anyone have ideas?

Answer 1

Instead of using $(function() { to bind to the document ready handler, use $(window).load() as this fire onces all images are loaded:

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