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 />");
}
});