javascript - 在通过 jQuery 的 load() 加载部分页面时显示加载动画

Question

在我的网站上，我想通过 jQuery 的load()函数动态加载“页面”，并且我想添加一个加载动画。

function loadPage(){
  $("#content").load("example.html");
}

<div id="loading"></div>当jQuery 加载该内容时，我会在哪里显示代码？

提前致谢。

Answer 1

使用 的回调函数.load()在加载完成时隐藏加载 div。

function loadPage(){
    $('#loading').show();

    $("#content").load("example.html", function () { //calback function
         $('#loading').hide();
    });
}

Answer 2

你可以尝试这样的事情：

$(document).ready(function() {
    $(this).ajaxSend(function() {
        $(this).append('<div id="loading"></div>');
    }).ajaxStop(function() {
        $('#loading').remove();
    });
});

这将适用于你所有的 ajax 调用......

Answer 3

我不确切知道您想做什么，但可能您想将内容加载到div. 您应该创建一个 CSS 类：

.loading {
  background: url(loading.gif) center center;
}

addClass()并在您开始加载时将此类添加到您的 div（清除它之后） ，并removeClass在.load回调中将其删除。