通过jQuery的load（）加载部分页面时显示加载动画

Question

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

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

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

提前致谢。

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;
}

这个类添加到您的div（后你清楚吧）与addClass()当你开始加载，并与删除它removeClass在.load回调。