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

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

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

3 个答案: