[jQuery] Best way to preload an image to obtain dimensions
Hi All,
I am building a simple little gallery where you click on a thumbnail,
and a larger image displays on the same page. I was trying to adjust
the padding around the large image using the new image's dimensions. I
pieced together this image preloading code (see below), but I don't
fully understand it (is it just loading the new image into the DOM to
be able to access its dimensions?) and I don't know if it's the best
way to go about it.
Many thanks for any advice,
Nora Brown
$(document).ready(function(){
$(".thumbs a").click(function(){
var largePath = $(this).attr("href");
var largeAlt = $(this).attr("title");
// Image preload process
var imagePreloader = new Image();
imagePreloader.src = largePath;
imagePreloader.onload = function() {
alert(imagePreloader.height);
};
$("#largeImg img").attr({ src: largePath, alt: largeAlt });
return false;
})
});