Question

我已经在其他网站上看过这个问题（只是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文件（ datatables插件总是需要一秒钟才能应用于我的表格。

在所有图像，CSS和JS文件都加载之前，我宁愿不显示页面。一个很好的进度条，甚至一个动画GIF就足以在我向他们展示最终网站之前展示，全部加载。我认为Gmail的加载栏使用了同样的想法。

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

Answer 1

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

Answer 2

我还没有尝试过，请谨慎一试。在$（document）.ready中，创建一个显示加载图标的叠加层，就像动画圈子一样。我假设你将它命名为#overlay。

然后，在$（文件）.ready之外，试试这个

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

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

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

2 个答案: