Why does IE11 return wrong img.width and img.height (28x30 pixels) for still loading images?

Question

I want to check the image width while its loading:

<img src="http://upload.wikimedia.org/wikipedia/commons/3/34/Regensburg_Uferpanorama_08_2006.jpg" id="img" alt="" />
<pre id="pre "></pre>
<script>
var i = 0;
var img = document.getElementById("img");
var pre = document.getElementById("pre");
function checkWidth() {
    i++;
    pre.innerHTML += "width:" + img.width + ";height:" + img.height + "\n";
    if (i < 20) {
        setTimeout(function() {
            checkWidth();
        }, 100);
    }
}
checkWidth();
</script>

Now I've tested several browsers and all return 0x0 until the image header (not the complete image) is loaded. After that they return the correct dimensions (e.g. 1920x1080).

But Internet Explorer 11 (I was only able to test this browser version) returns 28x30 pixel for every image (indepentent of aspect ratio), until the header is loaded.

enter image description here

Why does IE11 return this dimensions? Is this the usual behaviour in all IE versions?

Run that code `img.onload = function(){/* in here */}`. Of course you have to have the `src` set, which it looks like you do. — StackSlave, Mar 09 '15 at 22:39
@PHPglue that will work when the entire image is loaded, but it already does in IE. OP's problem is that is does not take its size right after receiving the headers (metadata) of the image like in Chrome. It waits for the image to be fully loaded to do that. — blex, Mar 09 '15 at 22:43

score 1 · Accepted Answer · edited May 23 '17 at 12:06

1

@mouser had the correct idea. Its the placeholder for broken images:
enter image description here

My solution was to use img.naturalWidth() instead of img.width() as described here:
https://stackoverflow.com/a/1977898/318765

This returns 0x0 until the image header has been loaded.

edited May 23 '17 at 12:06

Community

1
1

answered Mar 09 '15 at 23:33

mgutt

5,867
2
50
77

Why does IE11 return wrong img.width and img.height (28x30 pixels) for still loading images?

1 Answers1