页面加载时显示加载器 NO AJAX答案

【问题标题】：Show loader while page is loading NO AJAX页面加载时显示加载器 NO AJAX
【发布时间】：2012-03-28 15:24:23
【问题描述】：

有没有办法告诉浏览器在后台加载页面时显示加载器图像？

我正在构建一个应用程序，它基本上是一个 html5 应用程序，它将被加载到 webview 上。所有文件都将位于设备本身，与服务器没有交互，因此无法使用 AJAX。

如果用户导航到其他页面，那么加载器应该立即出现，然后在页面完全加载时隐藏。

这是用JS可以做到的吗？

谢谢

更新：

我完全按照你们所说的做了，在文档准备好时显示加载器，在页面卸载时也显示它，然后在文档准备好时显示它，但是在页面卸载和其他页面已卸载时加载器不可见尚未下载。有没有办法将加载器绑定到浏览器而不是页面？

【问题讨论】：

标签： javascript html browser user-interface

【解决方案1】：

您可以在所有内容上放置一个加载屏幕（位置：绝对，100% 宽度和高度）并在页面准备好时将其淡出。

演示：http://jsfiddle.net/G8GkA/

<div id="page">
    <div id="loader"><span>loading...<span></div>
        content....
</div>

加载时淡出（使用 jquery）：

$(function(){
    $('#loader').fadeOut();
});

【讨论】：

【解决方案2】：

你可以这样做

<body>
  <div class="LoadingStyle" id="LoadingInfo"></div>
  <div style="visibility:hidden" id="Content">
  <!-- All your content goes here -->
  </div>
</body>

在document ready 你可以这样做

$(function() {
    $("#LoadingInfo").hide();
    $("#Content").css("visibility", "visible");
});

基本思想是在文档没有准备好时显示一些东西。

编辑

你可以玩它。没有必要隐藏内容。您可以用绝对定位的div 覆盖它并仅隐藏它。

【讨论】：

请注意，您宁愿使用：display: none;，否则您可能会得到不需要的滚动条。
@PeeHaa 如果Content 是display:none;，内容中的图像会加载吗？
@PeeHaa 谢谢。那么我的话是display:none; 而不是visibility ))

【解决方案3】：

有一个页面（PageLoader）会使用ajax加载其他页面，然后可以显示加载器。

PageLoader 将页面名称作为参数并加载页面。

【讨论】：

我认为如果没有服务器，ajax 将无法工作，在 chrome 中它显示跨域错误，但它在 safari 上工作，这就是我现在所需要的。使用了上面@dhinesh 提到的技术。