jQuery的阿賈克斯加載外部內容 - 顯示加載圖標

Question

我有一個動態加載內容到一個div下面的代碼：

function loadContent(page){ 
    $("#contentPlaceHolder").load("/ajax/content?page=" + page); 
} 

我用下面的onclick方法來調用內容的onclick =「loadContent （'profile'）「

它運行良好，但任何人都可以告訴我如何在加載內容時顯示loading.gif？

感謝

Answer 1

This？

function loadContent(page){ 
    $("#contentPlaceHolder").html('<img src="loading.gif" />'); 
    $("#contentPlaceHolder").load("/ajax/content?page=" + page); 
} 

將gif文件放到div中，當內容加載時，圖像將被替換爲返回的數據。

Answer 2

$('#contentPlaceHolder').html('<img src="loading img url" alt="" style="background-position: center center;" /> '); 

function loadContent(page){ 
    $("#contentPlaceHolder").load("/ajax/content?page=" + page); 
} 

Answer 3

這是很基本的，但這樣的事情應該工作：

var $img $('<img/>', {src: 'loading.gif'}); 
$('#contentPlaceHolder').empty().append($img); 
$("#contentPlaceHolder").load("/ajax/content?page=" + page); 

，它創建正確的src值（loading.gif）的<img>元素，補充說，到內容持有者，然後發送AJAX調用來加載新的內容。由於這將取代現有的內容，加載動畫在完成時將被刪除。

Answer 4

我已經使用它，只要我從Select下拉菜單中選擇一個選項。你不需要包含阿賈克斯內部..

$("#Select_Dropdown").change(function() {     
    $(this).after('<div id="loader"><img src="imges/loading.gif" alt="loading subcategory" /></div>'); 

Answer 5

我可能會做這樣的事情：

function loadContent(page){ 

//Append a loader gif with class for css styling (centered in view): 
$("#content-wrap").append('<img class="loader" src="loader.gif" />'); 

    $("#contentPlaceHolder").load("/ajax/content?page=" + page, function() { 
//remove loader, but I'd probably use a css animation or greensock for a nice fade 
     $(".loader").remove(); 
    }); 
}