在加载 CSS 和 JS 文件时显示加载栏或动画 GIF？答案

【问题标题】：Show Loading Bar or animated GIF while CSS and JS files are loading?在加载 CSS 和 JS 文件时显示加载栏或动画 GIF？
【发布时间】：2010-03-01 15:45:22
【问题描述】：

我在其他网站和 SO 上看到过这个问题（只是 JS 或只是 CSS），但我还没有看到一个好的可靠方法来做到这一点。

我的情况相当普遍。我正在使用 .NET MVC 并在 Visual Studio 中进行开发。我有一个 Site.Master 页面和多个视图，每个视图都有一个内容占位符，我在其中指定我的 JS 和 CSS 文件，如下所示：

<asp:Content ID="headerContent" ContentPlaceHolderID="HeaderContent" runat="server">
    <link href="../../CSS/example.css" rel="stylesheet" type="text/css" />
    <script src="../../JS/jquery/jQueryFile.js" type="text/javascript"></script>
    <!-- More files here -->
</asp:Content>

我的导航栏是一个精灵图像，类似于在Apple's website 上看到的那个。我有带有标题的站点部分，也类似于 Apple 的，它们是图像。所以我的网站不是特别多的图像，但特别是当我在 IE 中查看时（在某种程度上也包括 Firefox），网站在我眼前拼凑起来，同时它为插件加载图像和 jQuery 文件（数据表插件总是需要一秒钟才能应用于我的表）。

我宁愿在所有图像、CSS 和 JS 文件都加载完之前根本不显示页面。在我向他们展示所有加载的最终站点之前，一个漂亮的进度条，甚至是动画 GIF 就足够了。我认为 Gmail 的加载栏使用了同样的想法。

对于如何最好地实现这一目标有什么建议吗？非常感谢。

【问题讨论】：

标签： css image progress-bar loading preloader

【解决方案1】：

试试这个：http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page

【讨论】：

【解决方案2】：

我还没有尝试过，请谨慎尝试。在 $(document).ready 中，创建一个显示加载图标的叠加层，就像一个动画圆圈排序的东西。我假设您将其命名为 #overlay。

然后，在 $(document).ready 之外，试试这个

$(window).load(function(){
  $("#overlay").hide();
});

$(window).load 表示一切就绪：http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

【讨论】：

@DN，谢谢。它看起来很有希望，但是当我在我的网站上试用它时，仍然有一些图像在 $(window).ready() 触发后加载。我可以将此归因于我的一些其他 JS 文件（例如数据表插件）在加载时应用 CSS。所以我可能需要某种 $(window).ready() 的组合来处理页面上刚刚硬编码的图像，以及在我的 JS 文件仍在加载（并应用它们的 CSS）时挂起的其他东西
@Mega Matt，没问题。您可能会让这些 js 文件在它们完成时向 body 标记添加一个类，然后添加类似 $("body.ready1.ready2.ready3").find("#overlay").hide();