Preload all images on a website with JQuery or Jav

Question

I can't seem to find any solid code on this at the moment, but I wanted to know (if possible) how to have all the images on a webpage preloaded using JavaScript or JQuery, for example.

Maybe have a pre-loading screen or overlay that displays while the images are being preloaded to the site, then fades out or disappears when done. Any help/direction on this would be amazing!

Thank you!

Answer 1

This is my preloader. Show preloader first, and when the whole page is loaded, hide preloader and show content. Try this, it's very simple and easy to change. This is link to my blog post with demo and code (~1 Kb): Preload web site using jquery

Answer 2

This will preload all of the images in CSS for your website automatically: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

I don't think you should have a loading screen since this would be very annoying to your users.

Answer 3

You could display a splash screen or a loading screen while the page is loading, and then remove this screen when JQuery tells you the page has been fully loaded. Something like this:

$(document).ready(function() {
  // add loader
});

$(window).load(function() {
    // remove loader
});

Answer 4

Do you mean loading a group of images (like a gallery?). If so, then you could do this with jQuery. Have you checked out the Image Loader plugin? It looks like it would do what you want:

http://www.staticvoid.info/imageLoader/

It would be trivial to put a div over the top of this before you run it and then remove it in the complete() callback.

You may also want to check out this SO topic that also talks about a plugin (which is going to be your best option, IMO): JQuery wait for page to finish loading before starting the slideshow?