Javascript jQuery Ajax加载外部内容-显示加载图标

我有以下代码可以将内容动态加载到div中：

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

我使用以下onclick方法调用content onclick=loadContent'profile'

它工作得很好，但是有人能告诉我如何在加载内容时显示loading.gif吗

---

谢谢

这真的很基本，但像这样的东西应该可以：

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

---

它创建一个value loading.gif，将其添加到内容持有者，然后发送AJAX调用以加载新内容。由于这将替换现有内容，加载动画完成后将被删除。

每当我从“选择”下拉列表中选择一个选项时，我都会使用它。而且您不需要在ajax中包含

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

这个

---

将gif文件放入div，当内容加载时，图像将被返回的数据替换。

我可能会这样做：

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

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

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