jQuery的頁面加載器

Question

我在做什麼是使用jQuery的'loader'。

基本上在選擇一個選項後，網站會搜索數據庫並返回匹配結果。所有這些都是在不刷新頁面的情況下發生的。

我正在添加「加載程序」 - 在網站從數據庫加載數據時出現的圖像，並且不知道從哪裏開始。

有人可以給我一些線索，也許插件或只是指我的一些網站，有解決方案？

問候

Answer 1

只要把圖像的加載指示器圖像的地方網站上：

<img src="loader.gif" alt="" style="display:none" id="loader-indicator" /> 

然後用這個JavaScript來顯示之前這一權利的Ajax調用火的，那麼它完成後再次將其隱藏。

$('#loader-indicator').show(); 
$.ajax({ 
    url:'ma/url', 
    success: function(){ 
     $('#loader-indicator').hide(); 
    }, 
    error: function(){ 
     $('#loader-indicator').hide(); 
    } 
}); 

如果需要加載指針影像，我想嘗試http://www.ajaxload.info/。但它似乎暫時不可用。

Answer 2

您既可以監視一個AJAX事件（http://docs.jquery.com/Ajax），如ajaxStart（http://docs.jquery.com/Ajax/ajaxStart）或ajaxComplete（http://docs.jquery.com/Ajax/ajaxComplete）和動作綁定到事件，如顯示和隱藏。

$('#myLoaderImage').ajaxStart(function(){ 
    $(this).css('display', 'block'); 
}); 
$('#myLoaderImage').ajaxComplete(function(){ 
    $(this).css('display', 'none'); 
}); 

OR。你可以做到這一點。

$('#myLoaderImage').css('display','block'); 

$('#someDiv').load('somePage.html', function(){ 
    $('#myLoaderImage').css('display','none'); 
}); 

所以，你會做是顯示加載您啓動Ajax調用權之前，和隱藏在它的Ajax調用完成後獲取運行的回調函數。第一種方法可能更好，因爲您可以監視全局ajax事件並隱藏/顯示任何ajax事件的加載器映像。