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


i've got web application loads content external source dom via ajax call, 1 of things comes set of images (different sizes , aspect ratios) displayed in profile photo section. i'd each of images resized fit within 64px x 64px area , i'd maintain aspect ratio. able in firefox, chrome, , safari, i've no luck getting work in ie 7 or 8. problem i've had finding jquery event reliably gets triggered after image loads since image added after page load. here's works in 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 trying center (horizontally , vertically) them rest of code does, think i've got of working if can find way trigger code after image loads in ie.

keep in mind needs work both on first visit (not cached) , subsequent visits (cached). i'm looking jquery, javascript, or css solution want avoid roundtrip/bandwidth each image.

have tired add load event images triggers when image loaded? 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 onload image elements if not doing preload approach.


Comments

Popular posts from this blog

c++ - Convert big endian to little endian when reading from a binary file -

C#: Application without a window or taskbar item (background app) that can still use Console.WriteLine() -

unicode - Are email addresses allowed to contain non-alphanumeric characters? -