Jquery: Grab an image's width after adding image

Question

Probably a simple solution but I'm stuck and it's late... :)

$j('#thisImage').html('<img src="image.jpg" id="box" />');
var imgWidth = $j('#box').width();

When I do a console.log(imgWidth) it's returning 0...

I'm pretty sure that it's because the .html(...) is not fully finished before the width(...) call is fired. I've tested it out with cached images and it works fine and gives me the correct image width... yet those that aren't cached are returning 0.

So I'm looking for a good solution that waits for the .html(...) call to finish before moving on to my .width(...) call

Any help is greatly appreciated. Thx!

---

UPDATE 1

Using CMS answer below... (and this may help everyone understand my dilemma)

If I do this:

var imgWidth = 0;

$j('<img src="image.jpg" id="box" />').appendTo("#thisImage").load(function() {
    imgWidth = $j('#box').width();

    //my first log
    console.log("Width 1: " + imgWidth);    
});    

//my second log
console.log("Width 2: " + imgWidth);

if (imgWidth > 100) {
    //do something
}

Then //my second log is returning before //my first log as the .load hasn't finished completing...

thus my if statement is always false as imgWidth is always 0...

that is until .load completes... but then it's too late...

---

UPDATE 2 : SEE WHAT I SEE

Using a modification of Ryan's answer...

Go to jsbin.com -> Include "jquery" from drop down menu -> Replace w/ below in the Javascript Tab and then click the Output Tab

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

$(document).ready(function() {
    var myWidth = 0;

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() {
                    myWidth = $(this).width();
                    $('#hello').append("Show Me First: " + myWidth + "<br />");
                });


    $(myImg).appendTo("body");

    if(myWidth > 0) {
        $('#hello').append("Success!");    
    } else {
        $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
    }

});

Answer 1

You could build the image element with the jQuery function, use appendTo to insert it inside your #thisImage element, binding the load event to the image:

$j('<img src="image.jpg" id="box" />').appendTo('#thisImage').load(function() {
  console.log($j(this).width()); // image loaded, show width
});

Answer 2

Try something like the code below:

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

var myImg = loadImg("lulz.jpg", function() {
    console.log($j(this).width());
});

$j(myImg).appendTo("#thisImage");

This pretty much does the following:

• Sets the image to load in the background, handing it off to the browser
• Allows jQuery to go ahead and construct the DOM element, append it, etc
• Our custom loadImg function accepts a callback function that fires when the image is ready

Of course, it goes without saying that you wanna do this after the DOM is ready, so document.ready is your friend and all that jazz. Have fun. ;D

Edit, in response to OP's edits:

Your code is as follows:

function loadImg(url, func) {
    var img = new Image();
    img.onload = func;
    img.src = url;
    return img;
}

$(document).ready(function() {
    var myWidth = 0;

    var myImg = loadImg("http://sstatic.net/so/img/logo.png", function() {
                    myWidth = $(this).width();
                    $('#hello').append("Show Me First: " + myWidth + "<br />");
                });


    $(myImg).appendTo("body");

    // This section is problematic...
    if(myWidth > 0) {
        $('#hello').append("Success!");    
    } else {
        $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
    }
});

I commented the problematic section; the image loading is an asynchronous thing. By the time that block is hit, there's no guarantee that your image will be ready. Perhaps I should've specified this in my earlier answer, but in this case it's better to do all your DOM manipulation in the image's callback function, so it fires when the image is actually ready.

Commented this rather than type another paragraph, but something like...

// Move this outside the $(document).ready, for scoping reasons...
var myWidth = 0;

function loadImg(url, func) {
    var img = new Image();
    img.onload = function() { func(img); };
    img.src = url;
    return img;
}

$(document).ready(function() {
    loadImg("http://sstatic.net/so/img/logo.png", function(img) {
        var myImg = $(img);

        // Since you can't get the width until the image is appended, get around it
        // by throwing it in hidden; get the width, then unhide it and do what you want.
        myImg.css({
            "position": "absolute",
            "visibility": "hidden"
        }).appendTo("body");

        myWidth = myImg.width();

        myImg.css({
            "position": "normal",
            "visibility": "visible"
        });

        if(myWidth > 0) {
            $('#hello').append("Success!");    
        } else {
            $('#hello').append("Show Me Second: " + myWidth + " <- BOO! Out of Order! <br />");
        }
    });
});