在加载 CSS 和 JS 文件时显示加载栏或动画 GIF？
我在其他网站上看到过这个问题（只是 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 网站。我有一些带有标题的网站部分，也类似于 Apple 的，即图像。所以我的网站并不是非常注重图像，但特别是当我在 IE（某种程度上还有 Firefox）中查看时，该网站在我眼前自行拼凑在一起，同时加载插件的图像和 jQuery 文件（数据表插件总是需要一秒钟才能应用到我的表）。
我宁愿在加载所有图像、CSS 和 JS 文件之前根本不显示该页面。在我向他们展示全部加载的最终站点之前，一个漂亮的进度条，甚至一个动画 GIF 就足够了。我认为 Gmail 的加载栏也使用了同样的想法。
对于如何最好地实现这一目标有什么建议吗？非常感谢。
I've seen this question asked in pieces (just JS or just CSS) on other sites and SO, but I haven't seen a good solid way to do this yet.
My situation is fairly common. I'm using .NET MVC and developing in Visual Studio. I have a Site.Master page and multiple views, each with a content placeholder where I specify my JS and CSS files, like this:
<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>
And my navigation bar is a sprite image, similar to the one seen on Apple's website. I have site sections with headers, also similar to Apple's, that are images. So my site isn't extremely image-heavy, but especially when I view in IE (but also Firefox, to some extent), the site sort of pieces itself together before my eyes, while it loads the images and jQuery files for plugins (datatables plugin always takes a second to apply to my tables).
I'd rather not show the page at all until all images, CSS, and JS files have loaded. A nice progress bar, or even an animated GIF would suffice to show before I show them the final site, all loaded. I think Gmail's loading bar uses this same idea.
Are there any suggestions on how best to achieve this? Thanks very much.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
试试这个： http:// /bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page
Try this: http://bytes.com/topic/javascript/answers/512734-how-make-progress-bar-while-browser-loading-page
我还没有尝试过，请谨慎尝试。在 $(document).ready 中，创建一个显示加载图标的覆盖层，就像一个动画圆圈之类的东西。我假设您将其命名为
#overlay。然后，在 $(document).ready 之外，尝试这个
$(window).load 意味着一切都准备好了： http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/
I've not tried this out yet, give it a cautious try. Inside $(document).ready, create an overlay that displays a loading icon, like an animated circle sorta thing. I'll assume you'll name it
#overlay.Then, outside of $(document).ready, try this
$(window).load means everything is ready: http://4loc.wordpress.com/2009/04/28/documentready-vs-windowload/