Preload All Images On A Website With Jquery Or Javascript

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 exam

Solution 1:

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
});

Solution 2:

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?

Solution 3:

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

Solution 4:

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.