CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-chrome
droidev
droidev

Reputation: 7380

img.height() and img.width() returning 0 in chrome,but returns correct value in mozilla

I have an image field in my markup.I am setting its source using jquery. I need its height and width. for that I have used image.height() and image.width() methods. it works proper in mozilla but not in chrome, I have tried image.height and image.width method, but not getting any value. also I have tried by changing prop method to attr for setting the image src, but it is also gives me the same result. I am pasting my code here.

html

<div>
<img src class="my-image"/>
</div>

Jquery

$(document).ready(function(){
var img = $(".my-image");
imageWidth = $('.my-image').width();
        imageHeight = $('my-image').height();
        alert(imageHeight);
});

what is the error here ? any help is appreciated

Upvotes: 3

Views: 2258

Answers (1)

Konstantin Dinev
Konstantin Dinev

Reputation: 34895

What happens is the image is not yet loaded on $(document).ready(); and at that point the element has dimensions of 0px by 0px. In order to ensure your image is loaded use the $(window).load(); event instead of document ready.

$(window).on("load", function(){
    var img = $(".my-image"),
        imageWidth = $('.product-image-og-size').width(),
        imageHeight = $('img.product-image-og-size').height();
        alert(imageHeight);
});

Upvotes: 3

Related Questions