Preload all images on a website with JQuery or Javascript

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!

score 1 · Answer 1 · answered Nov 16 '12 at 00:23

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

answered Nov 16 '12 at 00:23

Aleksandar

644
1
11
29

score 1 · Accepted Answer · answered Jul 19 '11 at 17:02

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

answered Jul 19 '11 at 17:02

slandau

23,528
42
122
184

this seems like its working im using it like this (for now) '$("document").ready(function(){ $("div#page").hide(); }); $("window").ready(function(){ $("div#page").show(); });' Is this kind of what you were saying? – The Fragile Machine Jul 19 '11 at 20:36
You should really use $(window).load instead of $(window).ready to make sure all images are loaded. – slandau Jul 19 '11 at 20:37

score 1 · Answer 3 · edited May 23 '17 at 12:14

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?

score 0 · Answer 4 · answered Jul 19 '11 at 17:16

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.

Preload all images on a website with JQuery or Javascript

4 Answers4

Linked