How can I resize an image, added via ajax, to fit within specific dimensions while maintaining aspect ratio using JQuery/CSS?

Question

I've got a web application that loads some content from an external source to the dom via an ajax call, one of the things that comes back is a set of images (different sizes and aspect ratios) to be displayed in an profile photo section. I'd like for each of the images to be resized to fit within a 64px x 64px area and I'd like to maintain aspect ratio. I was able to do this in firefox, chrome, and safari, but I've no luck getting this to work in IE 7 or 8. The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load. Here's what works in the listed browsers:

$(window).load(function () {
        $('.profileThumbnail').each(function (i) {
            var divHeight = $(this).height();
            var divWidth = $(this).width();
            if (divHeight > divWidth) {
                $(this).css('height', '64px');
                $(this).css('width', 'auto');
            }
            else {
                $(this).css('height', 'auto');
                $(this).css('width', '64px');
            }

            divHeight = $(this).height();
            var divParentHeight = $(this).parent().parent().height();
            var divNewHeight = (divParentHeight - divHeight) / 2;
            $(this).parent().css('top', divNewHeight);
            divWidth = $(this).width();
            var divParentWidth = $(this).parent().parent().width();
            var divNewWidth = (divParentWidth - divWidth) / 2;
            $(this).parent().css('left', divNewWidth);
        });
    });

I'm also trying to center (horizontally and vertically) them which is what the rest of that code does, but I think I've got all of that working if I can find a way to trigger this code after the image loads in IE.

keep in mind this needs to work both on the first visit (not cached) and subsequent visits (cached). I'm looking for a jquery, javascript, or css solution as I want to avoid the roundtrip/bandwidth for each image.

Answer 1

Have you tired to add a load event to the images yourself which triggers when the image is loaded? This is how image preloaders work.

var img = document.createElement("img");
img.onload = function(){ alert('loaded'); }
img.onerror = function(){ alert('error'); }
img.src = "foo.png";

You can add the onload to the image elements themselves if you are not doing the preload approach.

Answer 2

The problem I've had is finding a jquery event that reliably gets triggered after the image loads since the image was added after the page load.

Instead of setting an onload listener for the window, set an onload listener for the images you are loading remotely. Set the listener after you create the image object and before you insert it into the body. The listener can basically be all the stuff insife of the .each() in the code you posted,