使用 jQuery 添加页面加载器答案

【问题标题】：Adding a page loader using jQuery使用 jQuery 添加页面加载器
【发布时间】：2012-04-28 16:45:09
【问题描述】：

我需要一点帮助。我不知道从哪里开始。我需要在我的网站上添加一个页面加载器。我首先提交一个表单，然后使用 SimpleXML 通过 expedia 调用外部 XML 表...加载需要一分钟，所以我想将图像加载器添加到此页面。但是我该怎么做呢？我在 Google 上查看过，找不到任何有用的信息。

我需要它来显示加载器，直到 COMPLETE 页面加载完毕。

【问题讨论】：

标签： jquery pageload page-loading-message

【解决方案1】：

这有很多解决方案，但一个简单的方法是：

1- 使用您的加载程序创建一个覆盖 DIV 并添加到 BODY；
2- 为隐藏此 DIV 的 window.load 或 document.ready 事件添加事件侦听器。

// On the first line inside BODY tag
<script type="text/javascript">
    jQuery("body").prepend('<div id="preloader">Loading...</div>');
    jQuery(document).ready(function() {
        jQuery("#preloader").remove();
    });
</script>

（修正了代码拼写错误）

【讨论】：

注意：window.load 先触发，然后在内容加载完成后触发document.ready。
更正： document.ready 在所有 HTML 都已精细加载但在内容之前触发，window.load 在内容加载完成后触发

【解决方案2】：

查看 spin.js http://fgnass.github.com/spin.js/

var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 10, // The radius of the inner circle
// Even more options available.... 
};
var target = document.getElementById('loading');
var spinner = new Spinner(opts).spin(target);

一旦你的表格完成：

$("#loading").data('spinner').stop();

【讨论】：

【解决方案3】：

此加载器 div 将在页面加载时显示加载图像。

$(window).load(function() {
  $(".pageloader").fadeOut("slow");
});

body {
  background: black;/* for this demo */
}

.pageloader {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('images/yourLoaderImage.gif') 50% 50% no-repeat rgb(249, 249, 249);
  opacity: .8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="pageloader"></div>

它完全适合我。

【讨论】：

对于 jquery 版本 >3，.load()、.unload() 和 .error() 已删除，
感谢 @mightyteja 提供更新的 Jquery 版本的详细信息。
如果我在新选项卡中打开链接并在一段时间后访问该选项卡，这将不起作用。如果您有任何解决方案，请告诉我。