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 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!

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

回答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?

回答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

回答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.

来源：https://stackoverflow.com/questions/6751004/preload-all-images-on-a-website-with-jquery-or-javascript