Preloading Images

[blake_ensenita]

Does anybody know how to preload a file (image) so it is already loaded into the browser when the page is displayed? I'm using alot of background pictures in a css file and it is causing an attrotious "blink" every time it loads.

The javascript code:

var imagename = new Image();
imagename.src = "Images/image.jpg";

Does not work fast enough. Can anybody help?

[liquedus]

well once you have the object make sure you use it... can u post your code?? :lol:

also .jpg will take longer to load than .gif , so that might be a consideration.

[blake_ensenita]

It's got to be a jpg

I can't release the source code (copyrighted stuff), but i can tell you that I'm trying to retrieve the files inside a style tag.

ie.

Code: Select all

<style>

.main { background-image: url(Images/image.jpg);

</style>


[danhash]

preloading images is only useful for rolovers and if you use the same images on multiple pages. if you're using the same images on a bunch of pages, link to an external .js file. if it's just one page, preloading an image won't be any faster thatn letting it load itself (unless you preload it before and html, which would probably slow the whole page down)

[swirlee]

One situation in which this is useful is when you have a sequential presentation of some sort, like a slide show or a PowerPoint-like presentation. Since you know exactly which page the user is going to next, you can preload the images for that on the preceding page while that page is being viewed/presented.