Is there a 'ready' event fired when a jQuery element is created on the fly?
<p>I'm trying to implement something like a photo carousel in jQuery. This carousel could be filled with images using an array of image sources (I make an ajax request that returns a json with this data) and, once is filled, you can call a couple of methods, previous() and next() to move the carousel backward and forward respectively.</p>

<p>The thing is that this functionallity is already implemented and working, but I can't solve an issue on resizing process. For avoid that the images exceed the boundaries of the container, I have a method for creating and resizing the images, if needed.</p>

<pre><code>this.getImageResized = function(imageSrc) {

    var image = $('&lt;img /&gt;', {src : imageSrc});

    // Container ratio
    var ratio = this.itemMaxWidth / this.itemMaxHeight;

    // Target image ratio is WIDER than container ratio
    if((image[0].width / image[0].height) &gt; ratio) {
        if(image[0].width &gt; this.itemMaxWidth) {
            image.css('width', this.itemMaxWidth + 'px');
            image.css('height', 'auto');
        }
    // HIGHER
    } else {
        if(image[0].height &gt; this.itemMaxHeight) {
            image.css('width', 'auto');
            image.css('height', this.itemMaxHeight + 'px');
        }
    }

    // Embeds image into a wrapper with item's width and height
    var wrapper = $('&lt;span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"&gt;&lt;/span&gt;');

    image.appendTo(wrapper);

    return wrapper;
};
</code></pre>

<p>Testing this function, I've found that sometimes, images are not resized as expected. I've used firebug console.log() to log the image[0].width just below jQuery element creation, finding out that sometimes the value is 0.</p>

<p>I'm not an expert on jQuery, but I suppose that when this happens (value is 0) is because the element is not ready.</p>

<p>How can I assure that the element is already loaded when I ask for its width and height values?</p>

<p>Is something like this possible?</p>

<pre><code>var image = $('&lt;img /&gt;', {src : imageSrc}).ready(function() {
    // But image[0].width it's not available here!
});
</code></pre>

<p>Thank you for your help!</p>
