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

【问题标题】：Preload all images on a website with JQuery or Javascript使用 JQuery 或 Javascript 预加载网站上的所有图像
【发布时间】：2011-07-19 16:58:50
【问题描述】：

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

可能有一个预加载屏幕或叠加层，在图像被预加载到站点时显示，然后在完成时淡出或消失。任何关于这方面的帮助/指导都会很棒！

谢谢！

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

这似乎是它的工作我像这样使用它（现在）'$("document").ready(function(){ $("div#page").hide(); } ); $("window").ready(function(){ $("div#page").show(); });'你说的是这种情况吗？
你真的应该使用 $(window).load 而不是 $(window).ready 来确保所有图像都已加载。

【解决方案2】：

您的意思是加载一组图像（如画廊？）。如果是这样，那么您可以使用 jQuery 来执行此操作。你检查过 Image Loader 插件吗？看起来它会做你想做的事：

在运行它之前在它的顶部放置一个 div 然后在 complete() 回调中删除它是微不足道的。

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

【讨论】：

【解决方案3】：

这是我的预加载器。先显示预加载器，当整个页面加载完毕后，隐藏预加载器并显示内容。试试这个，它很简单，很容易改变。这是我的博客文章的链接，其中包含演示和代码（~1 Kb）： Preload web site using jquery

【讨论】：

【解决方案4】：

我认为你不应该有一个加载屏幕，因为这会让你的用户非常恼火。

【讨论】：