Image Displays Incorrectly On All Versions Of Internet Explorer

Question

I have the following Javascript code that resizes images on a page:

    var max_size = 498;
    $(".slideimage").each(function(i) {
      if ($(this).height() > $(this).width()) {
        var h = max_size;
        var w = Math.ceil($(this).width() / $(this).height() * max_size);
      } else {
        var w = max_size;
        var h = Math.ceil($(this).height() / $(this).width() * max_size);
      }
      $(this).css({ height: h, width: w });
    });

This code is contained within a $(document).ready() function.

The images display fine when viewed in Chrome, Firefox, Safari and Opera. However, when the same page is viewed in Internet Explorer 7, 8 and 9, sometimes (well, 50% of the time) when the page is first loaded the image appears at the correct width, but the height is really really small. I would guesstimate the height to be around 100px high. But when the page is reloaded, the same image will display perfectly.

It's a strange issue, and only happens in IE. Do I need to add or remove anything in that code?

Cheers

Answer 1

document.ready() potentially occurs before all of the images have been loaded on a page, so the reported height and width can be 0 or, as in your case, 100.

You need to wait for the page's images to be loaded before you can find their sizes reliably, particularly on IE.