CODEWITHSUNDEEP
jquery
user3024007
user3024007

Reputation: 283

jQuery get dimensions of image via its reference

I'm loading an html with references to images

How do I retrieve the real pixel width and height of each image referenced?

    // loaded html:
    <div id="eleWithImgs">
        <img id="ph01" src=".../image01.jpg">
        <img id="ph02" src=".../image02.jpg">
        ...

    // JS:
('#parentEle').load('.../photos.html #eleWithImgs', function() {

    $('#eleWithImgs').children().each(function() {

        var origWidth = // get dimensions of the image

    });

});

Upvotes: 0

Views: 54

Answers (2)

adeneo
adeneo

Reputation: 318332

You have to wait for the image to load before you can get the dimensions

$('#eleWithImgs').children().each(function() {
    this.onload = function() {
        var origWidth = this.clientWidth;
    }
    if(this.complete) this.onload();
});

Upvotes: 1

Rajaprabhu Aravindasamy
Rajaprabhu Aravindasamy

Reputation: 67217

You can use .height() and .width() functions to get the width/height of those images.

Try,

$('#eleWithImgs').children().each(function() {
    var origWidth = $(this).width();
    var origHeight = $(this).height();
});

Upvotes: 1

Related Questions