jquery - 如何在调用 ajax 时隐藏页面并显示正在加载的 div

Question

我想在用户单击按钮时遮盖所有页面，在页面中央显示一个带有加载 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");
});

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

Answer 1

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

例如

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

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

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

您必须仅在需要时调用该函数:)