troubleshooting Question

Preloading images, and getting width/height

Avatar of raterus
raterusFlag for United States of America asked on
2 Comments2 Solutions875 ViewsLast Modified:
I'm have a need when my page loads to a) Load an image and then b) get the width/height.  The problem I'm running into, at least in firefox, is when the image is first loaded, the width/height are reported incorrectly.  However, if I refresh the page, and the browser loads from cache, the correct width/heights are recorded.

Here's what I'm doing

var fppImage = $('<img />');
fppImage.attr('src', '/some/image/url.jpg').appendTo('body');

var iH = fppImage.height();
var iW = fppImage.width();

alert(iW + " " + iH);  

iW & iH return 24px on the first page load, but subsequent page loads return the correct dimensions of the image

It seems pretty straightforward, but doesn't work as you'd expect in firefox.  Can anyone suggest some ideas to actually preload the image?
Systems architect
Join our community to see this answer!
Unlock 2 Answers and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 2 Answers and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros