我怎么装载机添加到这个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这首先加载初始页面加载，然后有些内容随后与其他内容覆盖它当。接下来的按钮被点击：

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

});