Is there a 'ready' event fired when a jQuery element is created on the fly?

Question

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.

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.

this.getImageResized = function(imageSrc) {

    var image = $('<img />', {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) > ratio) {
        if(image[0].width > this.itemMaxWidth) {
            image.css('width', this.itemMaxWidth + 'px');
            image.css('height', 'auto');
        }
    // HIGHER
    } else {
        if(image[0].height > 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 = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>');

    image.appendTo(wrapper);

    return wrapper;
};

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.

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

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

Is something like this possible?

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

Thank you for your help!

Answer 1

You want to use the load event in this case, like this:

var image = $('<img />', {src : imageSrc}).one('load', function() {
  // use this.width, etc
}).each(function() {
  if(this.complete) $(this).load();
});

The last bit triggers the load event in case it didn't get triggered already...which doesn't happen in some browsers when loading the image from cache, using .one() to one fire it only once and .complete to check if it's loaded.