Reputation: 459
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 />");
}
});
Upvotes: 1
Views: 477
Reputation: 2042
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:
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 />");
}
});
});
Upvotes: 2
Reputation: 827426
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
});
Upvotes: 1