views:

96

answers:

1

What is the best method to preload images <img> and why? I want to show images on link's hover i can't use images in CSS background so i can't use CSS sprite. but i want to preload all images while page load . which are add as <img>.

+5  A: 

You can use the Image() object in Javacript to preload the image, then swap it in when you're ready. Here's the HTML:

<img name="img01" src="regular_image.jpg">

Then in the Javascript:

my_img = new Image(); 
my_img.src = "swap_image.jpg";

Which will put the image in your cache. When you swap it in, you can call:

document.img01.src='swap_image.jpg'
Whit
but i have multiple images.
metal-gear-solid
The idea is that you can preload image by create an Image object then setting its source. If you have multiple images, then you can create multiple Image objects. Or, if you're going to append them to the document instead of swapping, you can create `<img>` elements instead.
syockit