I'm trying to get the size of an image in javascript, using this kind of code:
var image = document.createElement("img");
image.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
Then I've been trying to use image.width or image.naturalWidth to get the image's width but it retrieves 0.
After you have created the element using the above code. You can use
image.height
image.width
The reason, you get 0 is because when you execute the statement, it wouldnt have loaded. You have to wait till the image is loaded and execute the statement. You can use document.ready but the problem is that it might not be 100% accurate there.
refer: Official way to ask jQuery wait for all images to load before executing something
You can use window.load (using jquery), but that is something which is risky as per the above article.
For the best possible solution, what you can use a lib https://github.com/desandro/imagesloaded.
You can use @Raman's technique, but the problem is that you have to attach eventlistener to per image which could get clumpsy.
If you are using imagesloaded, you can watch a container for the images to be loaded and execute the code accordingly.
Jsfiddle: https://jsfiddle.net/52q0juq6/1/
DOM event listeners or something
You'll need to have image dimensions calculated on load of the image.
Here is a fiddle to demonstrate the same.
image.addEventListener('load', function(){
console.log(image.width);
console.log(image.height);
});
image.width in my code it is still zero... I'm trying to figure out why.image.width) inside the load callback function only.Its because the image hasn't loaded yet.
<html>
<img id="theImage" src="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png" />
<button id="Ok" value="Ok" onclick="ShowImageWidth()" />
<script type="text/JavaScript">
//This runs when the page loads and shows 0
var element = document.getElementById('theImage');
alert(element.width);
//This runs AFTER the page has loaded and the button is clicked and shows 100
function ShowImageWidth() {
var element = document.getElementById('theImage');
alert(element.width);
}
</script>
</html>
