Im in the process of trying various methods of preloading, to see which work best in general.

I have tried the JavaScript method but im not sure how well its working. I used the CSS method with a div and the dispaly being set to none. this seems to work very well, however what I like about the javascript version is that you can keep a seprate file for your preload script (although im pretty sure mine isnt working ...grrrr).

I havent tried setting the images to display off the page such as setting there position to -5000px or something nor have I tried setting the files to dispaly at say 1px X 1px.

Anyways I was wondering what methods any of you used for preloading images into the clients cache?

anyone?

I usually declare a var to be a new image then assign the src attribute.

var newImg = new Image();
newImg.src = "images/testImg.jpg";

This will cause the browser to load the image. Then you can use the image later via JavaScript and it is already cached. What I do not know and have never tried (and actually it never occurred to me until just now) is whether this method of pre-loading would work even if the implementation of the image was mandated by some CSS event (like a:hover). Interesting question.

Hope this helps.

yeah I think thats my problem, that it doesnt seem to be working with CSS in the use of image swaps for <a>. I still havent had a chance to mess with that aspect of it, been working on other items.

See what Im trying to do is make a pre-loader file or script so that my CSS image swap menues will be instantly there. Im trying to do this in a seperate file so that I dont have to type out all the code in each page of the site to preload the images, I could just refrence the file that contained all the image files to pre-load. Doin this I could make like 2 or 3 different files depending on what I would need to pre-load (for speeding up download time).

Perhapes I should look into XML, however I have no clue when it comes to XML (havent started learning it yet, attmepted but skipped it). I just recently added a Flash viewer gallery to my site and it contains and XML file for the images, or something not really sure how it works(yet).

So any help would be greatly apprcieated.

btw thanks for the input Kyrnt

What are you coding in? ASP? PHP?

If you have a header file that is common to pages encompassing the functionality you need, you could have that file include just the JavaScript you need. That would be a pretty clean (and rather cool) solution.

The more I think about it, the more I believe the solution I described earlier will work. The browser will cache the image according to its URL and won't care how it was retrieved (whether by JavaScript or hard HTML reference or CSS) -- so give that a shot. Use the JavaScript to pre-load your image then have CSS use the image pre-loaded by the JS. Come back and let us know how it worked for you......

I just posted a non-JS way of preloading images here. If you are using PHP or ASP, you could easily load the images in an include file, using that method, without javascript. Just put the include at the end, before the </body> tag, so that everything else loads first.