使用JQuery或Javascript预加载网站上的所有图像

Question

我目前似乎无法在此找到任何可靠的代码，但我想知道（如果可能的话）如何使用JavaScript或JQuery预先加载网页上的所有图像。

在将图像预加载到网站时，可能会显示预加载屏幕或叠加层，然后在完成后淡出或消失。对此的任何帮助/指导都会令人惊叹！

谢谢！

Answer 1

您可以在加载页面时显示启动画面或加载屏幕，然后在JQuery告诉您页面已满载时删除此屏幕。像这样：

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

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

Answer 2

您的意思是加载一组图像（如图库？）。如果是这样，那么你可以用jQuery做到这一点。你有没有看过Image Loader插件？看起来它会做你想做的事情：

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

在运行之前将div放在其顶部然后在complete（）回调中删除它将是微不足道的。

您可能还想查看此SO主题，该主题也谈到了一个插件（这将是您的最佳选择，IMO）：JQuery wait for page to finish loading before starting the slideshow?

Answer 3

这是我的预加载器。首先显示预加载器，并在加载整个页面时隐藏预加载器并显示内容。试试这个，它非常简单，易于更改。这是我的博客帖子的链接，包含演示和代码（~1 Kb）： Preload web site using jquery

Answer 4

这会自动为您的网站预装CSS中的所有图片： http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

我认为你不应该有一个加载屏幕，因为这对你的用户来说会非常烦人。