Size of image before load
We discovered some peculiarities in the way browsers report the size of an image before this image has been loaded by the browser. Here is what we found so far. You may also test it for yourself on our test page, which use this minimal script:
var imgTag = "<img src='http://lorempixel.com/400/200/?"+Math.round(Math.random()*10000)+"' />",
body = document.body;
body.innerHTML=imgTag+body.innerHTML;
var img = body.firstChild;
alert("Before load [width=" + img.width + "][offsetWidth=" + img.offsetWidth + "][height=" + img.height + "][offsetHeight=" + img.offsetHeight + "]");
img.onload = function() { alert("After load [width=" + img.width + "][offsetWidth=" + img.offsetWidth + "][height=" + img.height + "][offsetHeight=" + img.offsetHeight + "]" );};
body = document.body;
body.innerHTML=imgTag+body.innerHTML;
var img = body.firstChild;
alert("Before load [width=" + img.width + "][offsetWidth=" + img.offsetWidth + "][height=" + img.height + "][offsetHeight=" + img.offsetHeight + "]");
img.onload = function() { alert("After load [width=" + img.width + "][offsetWidth=" + img.offsetWidth + "][height=" + img.height + "][offsetHeight=" + img.offsetHeight + "]" );};
| Browser | width | offsetWidth | height | offsetHeight |
|---|---|---|---|---|
| IE 7/8/9 | 28 | 28 | 30 | 30 |
| FireFox 3.0/3.5/3.6/4..13 | 0 | 0 | 16 | 16 |
| FireFox 2.0 / Safari / Chrome / iOS / Android | 0 | 0 | 0 | 0 |