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

我已经看到这个问题在其他网站上的问题（只是JS或只是CSS），所以，但我还没有看到一个很好的方法来做到这一点呢。显示正在加载CSS和JS文件时加载Bar或GIF动画？

我的情况相当普遍。我使用.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的加载栏使用了相同的想法。

有没有关于如何最好地实现这一点的建议？非常感谢。

来源

2010-03-01 Matt Powell

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

来源

2010-03-01 15:48:45

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

然后，$（文件）。就绪外，试试这个

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

$（窗口）.load意味着一切准备就绪：此http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/

来源

2010-03-01 15:59:42

@DN，谢谢。它看起来很有前途，但是当我在我的网站上试用它时，仍然有一些图像在$（window）.ready（）之后加载。我可以将这归因于我的一些其他JS文件（例如数据表插件）在加载时正在应用CSS。所以我可能需要$（window）.ready（）作为刚刚在页面上硬编码的图像的某种组合，还有其他东西在我的JS文件仍在加载（并应用它们的CSS）时挂起。 –

@Mega马特，没问题。你可能会有这些js文件在完成时向body标签添加一个类，然后添加类似$（“body.ready1.ready2.ready3”）。find（“＃overlay”）。hide（）; –

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

回答

相关问题