Question

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

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

我使用以下onclick方法调用内容onclick =“loadContent（'profile'）”

效果很好，但是有人能告诉我如何在内容加载时显示loading.gif吗？

由于

Answer 1

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

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

Answer 2

这是非常基本的，但这样的事情应该有效：

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

它创建一个具有正确<img>值（loading.gif）的src元素，将其添加到内容持有者，然后发送AJAX调用以加载新内容。由于这将替换现有内容，因此加载动画将在完成时被删除。

Answer 3

每当我从Select下拉列表中选择一个选项时，我都会使用它。你不需要在ajax中包含..

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

Answer 4

此？

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

将gif文件放入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();
   });
}

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

5 个答案: