Как добавить загрузчик в эту функцию 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:

а) изначально, когда страница загружает контент по умолчанию; и b) впоследствии, когда загружается контент.next href

Заранее спасибо!

Answer 1

Попробуйте это с помощью методов 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-запрос останавливается.

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;

});