How to 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 the list of image elements into this div:

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

where images.html is a list:

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

To fully load all the images, I use the onImagesLoad plugin. This so far works very well in all browsers.

However, in IE8 (and I suppose other versions of IE too), when I then iterate over the img elements, I cannot determine the width / height of the downloaded images. The image.context.naturalWidth and naturalHeight attributes do not work.

How do I get image size?

Thanks, heaps :)

Update

@Simon: This does not work on IE, and also violated other browsers.

@Jenechka: If "imageDomElement" is just another name for the variable "image" in my example above, then this does not work. Or what do you mean by this DomElement?

Answer 1

It was a while, but I finally found the time to work with it again. The above issues still exist, but I think this is happening.

When I load the source images, then yes, the file is loaded and image objects are generated. But it seems that the attributes are not yet correct, and they will not be until the image is added to the DOM of the site and displayed. Div / image on hide () in IE does not have any size information; Safari has some information. For example, without adding the next div anywhere

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

the image contained in it has the following information:

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

What's on Safari; on IE it is the same except attr("width") = 0 and css("width") = "auto" . Now I can not use this, and what broke my script and why I posted my original question. However, the moment I add this div and render it, all the correct values ​​are displayed in the image object.

I am writing a small thinghie gallery that shows all the images that I have in this second .html file that I upload; this gallery, however, calculates and places thumbnails and prepares images that it displays in full resolution. To make it look normal, I basically wanted to create everything that is hidden, and then fade away. Alas, it seems that this whole idea will not be spread. A friend suggested loading everything in a tiny iframe to the left, where it is not visible, and working with it. Perhaps this is the way to go.

Another thing that I noticed, and which seems to be very closely related to the aforementioned download problem, is clone (). It seems that if the image is displayed,

 var newimg = img.clone() 

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

Right now I see no other way but to rethink and rewrite parts of my gallery.

Answer 2

If you have not resized the image, you can use:

 image.width() 

and

 image.height() 

Answer 3

This is very similar to other answers, but I tested it in IE7, so it may 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 the way you used it, but I am not familiar with this onImagesLoad function.

Answer 4

 imageDomElement.width imageDomElement.height 

or try

 imageDomElement.clientWidth imageDomElement.clientHeight 

Answer 5

If you are playing with jquery then image.attr (width) should do the trick But why not use document.ready instead, it can give you less headeache ..

Answer 6

Use the following code instead

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

Answer 7

What about?

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