How can I determine img width/height of dynamically loaded images in IE?

Question

My markup is a simple div element with id 'load'. Using jQuery I then load a list of image elements into this div:

$('#load').load('images.html', { }, function() {
  $(this).onImagesLoad({
    selectorCallback: function() {
      ....do something....
    }
  });
});

where images.html is a list like this:

<img src='1.jpg' caption='img 1'>
<img src='2.jpg' caption='img 2'>
...

To ensure that all images are loaded completely, I use the onImagesLoad plugin. This, so far, works just fine on all browsers.

However, on IE8 (and I assume other versions of IE also) when I then iterate over the img elements, I am unable to determine the width/height of the images loaded. The image.context.naturalWidth and naturalHeight attributes don't seem to work.

How do I get a hold of the images' dimension?

Thanks heaps :)

Update

@Simon: That didn't work on IE, and broke the other browsers as well.

@Jenechka: If "imageDomElement" is just another name for the "image" variable in my example above, then it doesn't work. Or what do you mean by that DomElement?

Answer 1

If you haven't resized the image, you could use:

image.width()

and

image.height()

Answer 2

imageDomElement.width
imageDomElement.height

or try

imageDomElement.clientWidth
imageDomElement.clientHeight

Answer 3

If you play with jquery, then image.attr(width) should do the trick But why not using the document.ready instead, could give you less headeache. .

Answer 4

This is quite similar to the other answers, but I have tested it in IE7, so it might be closer to what you want:

$(document).onImagesLoad({
  selectorCallback: function() {
      $('img').each(function(){
         alert($(this).width()+', '+$(this).height()); 
      });
  }
});

See here, this may not be exactly how you were using it, but I'm not familiar with this onImagesLoad thing.

Answer 5

Use the following code instead

$(document).onImagesLoad({
      selectorCallback: function() {
          $('img').each(function(){
             alert($(this)[0].clientWidth +', '+$(this)[0].clientHeight); 
          });
      }
    });

Answer 6

It's been a while but I finally found some time to tinker with this again. The above problems are still there, but here is what I think is going on.

When I load the initial images then yes, the file is loaded and image objects are generated. But it seems that the attributes are not correct yet, and they won't be until the image is actually added to the DOM of the site and rendered. A div/image on hide() on IE has no dimension information whatsoever, on Safari there is some information available. For example, without adding the following div anywhere

var test = $("<div><img src='test.jpg'></div>")

the image contained there has the following information:

• width() = 0,
• attr("width") = 600,
• css("width") = "", and
• img[0].clientWidth = 0.

That's on Safari; on IE it's the same except attr("width") = 0 and css("width") = "auto". Now I can't use this, and that's what broke my script and why I posted my initial question. However, the moment I append this div and have it rendered, all the correct values show up in the image object.

I'm writing a little gallery thinghie, which shows whatever images I have in that second .html file that I load; that gallery, however, computes and places the thumbnails, and prepares the images it shows in full resolution. To make this look ok, I basically wanted to create the entire thing hidden, and then fade it in. Alas, it seems that this whole idea won't pan out. A friend suggested to load everything into a tiny iframe off to the left where it's not visible, and work with that. Perhaps that's the way to go.

Another thing I noticed, and that seems to be very closely related to the aforementioned load issue is clone(). It seems that if an image is rendered, a

var newimg = img.clone()

generates the same "empty" image object that I have to deal above. Even when the original image is visible and contains all the right attributes, its clone does not.

Right now I don't see any other way than to rethink and rewrite parts of my gallery.

Answer 7

What about?

$("#load img").each(function() {
   var img = new Image();
   img.src = this.src;
   alert(img.height + " x " + img.width);
});