调用ajax时如何隐藏页面并显示加载div答案

【问题标题】：How to shadow page and show a loading div when ajax is called调用ajax时如何隐藏页面并显示加载div
【发布时间】：2012-02-02 22:55:20
【问题描述】：

我想在用户单击按钮时隐藏所有页面，在页面中心显示一个带有加载 gif 的 div 并向页面调用 ajax 请求。当 ajax 完成隐藏阴影时，隐藏正在加载的 div。有可能吗？有人可以解释一下吗？我看到here这个代码：$

("#btnLoad").click(function(){

  // Put an animated GIF image insight of content
  $("#content").empty().html('<img src="loading.gif" />');

  // Make AJAX call
  $("#content").load("http://example.com");
});

我可以用这个吗？我可以在哪里拍摄影子？

【问题讨论】：

标签： jquery ajax loading shadow

【解决方案1】：

使用 css 创建新的 div (id: loader): position: fixed; z 指数：90；顶部：0；左：0；背景：RGBA（0,0,0,0.5）；放在body部分的and处
使用 css 创建新的 div：margin: 30% auto;宽度：200px；高度：60px；背景：#fff;将其放入第一点创建的 div 中。将文本“加载中...”或其他内容放入其中。
创建 js 函数，该函数将在开始加载时从第一个点显示 div，并在加载结束时隐藏它。

例如

function loadingOn() {
    $('#loader').fadeIn(300);
}

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

function loadingToggle() {
    $('#loader').fadeToggle(300);
}

您只能在需要时调用该函数:)

【讨论】：

有非常好的 jQuery 方法称为 $.ajaxStart() 和 $.ajaxStop()。它们都在 jQuery API 服务中进行了描述。（link 和 link）
在接受这个答案的同时，我认为这不会解决他执行的更大问题，即使你的答案是正确的。现在他正在为 jQuery 创建自己的“插件”，但实际上并没有在语法上正确。现在这可能是干净的，但会导致开销巨大的头痛。我的意思是他已经在整个 jQuery 库中加载了……那为什么不呢？
此解决方案中建议代码的一个小补充：您可能还希望将以下 CSS 定义添加到阴影元素的主 DIV：宽度：100%；高度：100%；这样做是为了用半透明阴影覆盖整个页面内容。

【解决方案2】：

查找 jQuery 的颜色框。这将通过一个简单的轻量级库添加到您已经在使用的 jQuery 来完成您想要的一切。

http://jacklmoore.com/colorbox/

【讨论】：

这仅适用于影子.. 并在 ajax 请求中添加它？在ajax完成时隐藏它？ :)
你可以做所有这些，甚至更多！这是一个非常整洁的小工具。您可以从 ajax 请求加载页面，也可以将 html 作为属性填充...看看，您还可以打开和关闭阴影，并使用回调使事情提前或延迟发生以获得您在上面描述的所需效果。