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

使用ajaxStart()＆amp; 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请求停止时隐藏它。

Answer 2

这是我提出的有效的方法，但不确定它是如此有效 - 很高兴听到更好的选择： - ）

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

});

如何在此jquery ajax函数中添加加载器

2 个答案: