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(); 
    }); 
}