Question

Are there any types of oncomplete methods to know when images have been completely loaded from a server?

I have an XML feed that I use in order to fetch image URL’s and then display them in a gallery that I’ve created. The images are coming in as all different sizes and I’m trying to resize them to fit a certain aspect ratio. I am unable to resize them because I get no width and height.

Here is how I’m pulling in my feed via Jquery:

$.get('feed/test.xml', function(data){
        $(data).find('item').each(function(){  
            var obj = $(this);
            var image = obj.find('ImageURL').text();  //  http://testimageurl.com

            var str = ' <li>';
            str += '        <img src="'+ image +'" />';
            str += '    </li>';

            $("#slider").append(str);
        });

         // Code for resizing images goes here
    });

I need to be able to get the images sizes from the URL when they are done loading.

Make sense to anyone?

Answer 1

You’re looking for load (and complete if the image is already cached) event:

Try to change

$("#slider").append(str);

into

$(str).find('img')
   .one('load complete', function() {
       /* do something onload or complete event */
   })
   .end()
   .appendTo($("#slider"));