如何創建ajax預加載器

我知道這是一個noob問題，但我會拋出它。如何創建ajax預加載器

$('#loading') 
.ajaxStart(function() { 
    $(this).show(); 
}).ajaxStop(function() { 
    $(this).hide(); 
})

我有我的.js這個代碼，並有

<div id="loading"><img></div>

我的HTML中。

和我有一個圖層，單擊按鈕時加載ajax。

jQuery(document.body).on('click', '.open_list', function (e) { 
e.preventDefault(); 
jQuery(".ajax_list").fadeOut(function() { 

jQuery('.list').addClass('slideIn'); 
    var $ajaxList = jQuery(this); 

    $ajaxList.load("http://lifeto.dothome.co.kr/xe/free .ajax_contents", function() { 
     $ajaxList.fadeIn(); 
    }); 
}); 
});

問題是，如何在加載數據時在.list中加載preloader div（#loading）？

我只是jQuery和ajax的初學者，所以我不知道$（this）和.ajaxStart指的是什麼。

這裏是我的網站的實際地址。 http://lifeto.dothome.co.kr/xe/page_FIsv96

來源

2015-02-09 Mark

剛剛看過的文檔有關這兩種方法：['ajaxStart']（HTTP ：//api.jquery.com/ajaxStart/）['ajaxStop']（http://api.jquery.com/ajaxStop/）。這兩個鏈接都提供了可以在處理程序內執行的示例。你也可以調試這些處理程序，看看'this'的實際值（我認爲它會是'window'對象） – 2015-02-09 08:14:05

HTML

<a href="#" id="verification" >test</a> 
<img src="example_preloader.gif" id="ajaxPreloader" style="display:none" />

$('#verification').click(function() { 
    $('#ajaxPreloader').toggle(); 
    $.ajax({ 
     type  : "POST", 
     url  : "example url", 
     data  : {'exampleData': ''}, 
     success : function(msg) { 
     $('#ajaxPreloader').text(''); 
     location.reload(); 
     }, 
     error: function(error) { 
     $('#ajaxPreloader').text(''); 
     } 
    }); 
    });

來源

2015-02-09 08:14:52 websky

我想這應該與工作

$(document) 
.ajaxStart(function() { 
    $('#loading').show(); 
}).ajaxStop(function() { 
    $('#loading').hide(); 
})

來源

2015-02-09 08:15:56

如何創建ajax預加載器

回答

相關問題