determine width and height of an image while it isn't inserted to the dom

Question

I'm receiving images inside a long string from a server using an ajax call

The url of the image is inside result[1] for sure. I've used width/naturalWidth and height/naturalHeight and on occasion they return 0 and in other cases they return the right size in pixels

var imgElement = jQuery("<img>").attr("src", result[1]);
var width = imgElement[0].naturalWidth;
var height = imgElement[0].naturalHeight;
if (width >= that.minImgPixels && height >= that.minImgPixels) {
    image = result[1];
}

How is the right way to check image width and height without inserting it to the dom?

This answer to a similar question shows you how to progamatically create the image in javascript without it having to be in the dom first: http://stackoverflow.com/a/626505/1805956 — Alex Woodhead, Sep 10 '13 at 07:35

score 0 · Answer 1 · answered Sep 10 '13 at 07:35

The problem occures since settings the src of an jQuery("<img>")takes time and while it does that, the javascript continues to run to the next lines which produce 0 since the image wasn't loaded yet.

The solution is to set a load event like that:

var imgElement = jQuery("<img>").load(function(){
    var width = imgElement[0].naturalWidth;
    var height = imgElement[0].naturalHeight;
    if (width >= that.minImgPixels && height >= that.minImgPixels) {
        image = result[1];
    }
}).attr("src", result[1]);

see load method caveats at [http://api.jquery.com/load-event/](http://api.jquery.com/load-event/) — Joe, Sep 10 '13 at 07:37

score 0 · Accepted Answer · edited May 23 '17 at 10:31

try this:

function GetAnImage(src) {

    var newImg = document.createElement('img');
    newImg.src = src;

    return newImg;
}

var newImg = GetAnImage("abc.jpg");
newImg.onload = function () {                           
    var height = this.height;
    var width = this.width;  
    //do with the image as you want         
}

or see this link: Getting auto size of IMG before adding it to DOM (Using JQuery)

determine width and height of an image while it isn't inserted to the dom

2 Answers2