Width and height of an image can be found using the naturalWidth and naturalHeight properties of the image DOM element.
Waiting for the Image to Load
Before finding the dimensions of the image, it should be loaded first. You can use the load event handler on the image to find when the image has finished loading. Once it has been fetched you can find the dimensions of the image.
// jQuery
$("#img-element").on('load', function() {
// Original width of image
var image_width = $(this).get(0).naturalWidth;
// Original height of image
var image_height = $(this).get(0).naturalHeight;
});
// Pure javascript
document.querySelector("#img-element").addEventListener('load', function() {
// Original width of image
var image_width = this.naturalWidth;
// Original height of image
var image_height = this.naturalHeight;
});
Checking Whether Image is Loaded from Cache
If the image has been loaded before, and the next time when you re-load the page, the image may be loaded from the browser cache. In that case load event handler may not be executed for some browsers. So before adding the load event, check whether image is already present in the browser cache.
The complete property can be used for this. This property returns true if the browser has finished fetching the image. Please note that it returns a true even if the image could not fetched — the return value just denotes that the browser has done its work, successful or unsuccessful. It also shows true if the image has no "src" value.
Complete Codes
With jQuery :
// Image is loaded from cache
if($("#img-element").get(0).complete) {
var image_width = $("#img-element").get(0).naturalWidth;
var image_height = $("#img-element").get(0).naturalHeight;
}
else {
$("#img-element").on('load', function() {
var image_width = $(this).get(0).naturalWidth;
var image_height = $(this).get(0).naturalHeight;
});
}
With pure Javascript :
// Image is loaded from cache
if(document.querySelector("#img-element").complete) {
var image_width = document.querySelector("#img-element").naturalWidth;
var image_height = document.querySelector("#img-element").naturalHeight;
}
else {
document.querySelector("#img-element").addEventListener('load', function() {
var image_width = this.naturalWidth;
var image_height = this.naturalHeight;
});
}
Useful Links
Checkout this answer on Stackoverflow. It shows various test cases on using width, naturalWidth properties.