jquery - 如何向这个 jquery ajax 函数添加加载器

Question

我有以下 HTML

<a href="/loadme.html" class="next">Load this content</a>
<a href"/loadmeto.html" class="next">Load some other content</a>

<div id="ajaxcontent"></div>
<div id="ajaxloader">*obligatory animated gif*</div>

下面的 jquery 在初始页面加载时首先加载一些内容，然后在单击 .next 按钮时用其他内容覆盖它：

// Load the default initial content 
$(document).ready(function() {
$('#ajaxcontent').load('/keyplate/1');
});

// Dynamically GET the content via Ajax
$(document).on("click", ".next", function(){
    var link = $(this).attr('href');

    $('#ajaxcontent').fadeOut('fast', function() {
        $.get(
            link +' #ajaxcontent', 
            function(data) {
                $("#ajaxcontent").html(data).fadeIn('fast');
            }, 
            "html"
        );

    });
    return false;

});

我需要一些帮助是如何显示/隐藏加载 div：

a) 最初当页面加载默认内容时；b) 随后在加载 .next href 内容时

提前致谢！

Answer 1

这是我想出的有效方法，但不确定它是否如此有效-很高兴听到更好的选择:-)

// Load the default initial content 

$(document).ready(function() {
    $('#ajaxcontent').load('/keyplate/1');
});

$(document).ajaxComplete(function() {
    $("#ajaxloader").hide();
});

// Dynamically GET the content via Ajax
$(document).on("click", ".next", function(){
    var link = $(this).attr('href');

    $('#ajaxcontent').fadeOut('fast', function() {
        $("#ajaxloader").show();
        $.get(
            link +' #ajaxcontent', 
            function(data) {
                $("#ajaxcontent").html(data).fadeIn('fast');
            $("#ajaxloader").hide();
            }, 
            "html"
        );

    });
    return false;

});

Answer 2

尝试使用ajaxStart()和ajaxStop()方法：

HTML

<div id="ajaxloader">
    <img src="/images/ajax-loader.gif" alt="Loading..."/>
</div>

CSS：

div#ajaxloader
{
    display: none;
    width:100px;
    height: 100px;
    position: fixed;
    top: 50%;
    left: 50%;
    text-align:center;
    margin-left: -50px;
    margin-top: -100px;
    z-index:2;
    overflow: auto;
}  

JS

$('#ajaxloader').ajaxStart(function () {
    $(this).fadeIn('fast');
}).ajaxStop(function () {
    $(this).stop().fadeOut('fast');
});

这将在 Ajax 请求启动时显示加载图像，并在 Ajax 请求停止时将其隐藏。