Question

我使用JQuery Ajax从服务器获取表的内容，使用如下代码：

success: function(data)
{
    //once I get the data, remove the old content from table
    $('.tableBody').empty();

    // then repopulate the table
    $.each(data, function(key,val) {
        //process the data, add different icons, texts...,append it to my table
        showTable(key, val);
   });
}

这很好用。但问题是表有很多行，所以重新填充需要大约300毫秒，（empty()只需要大约10毫秒），所以在短暂的时间内，表格是空白的。

我是否可以在"empty()"和"showTable()"之间添加一些动画，以避免空白屏幕无缝过渡？

Answer 1

如果showTable()正在做的是“处理数据，添加不同的图标，文本......，将其附加到[您的]表格”，那么它可能如下所示：

$.each(data, function(key, val){
    $('.tableBody').append(key +' - '+ val);
});

首先应该知道的是，尽可能长时间地将HTML保存在字符串中然后将其放入jQuery对象并将其附加到DOM而不是创建多个jQuery对象（将附加到DOM也是多次。所以你最好做一些像：

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody').append(tableContents);

它允许你在重新填充之前清空表格：

var tableContents = '';
$.each(data, function(key,val){
    tableContents += key +' - '+ val; // generate whatever HTML you need
});
$('.tableBody')
    .empty()
    .append(tableContents);

Answer 2

如果我是你，我会slideUp旧桌子（或者更好的是在顶部放置一个半透明的白色div）并在屏幕上准备新桌子，然后简单地交换内容和slideDown （或fadeOut白色div，如果你选择这种方法）

Answer 3

在AJAX回调中（甚至在此之前）收到数据后，显示加载动画，执行您的操作，然后再次显示您的表单/表格。

一种基本的例子。点击提交，显示加载动画，隐藏表格。做你的东西（AJAX请求），然后隐藏加载动画，并再次显示表单。

<img class="loading" src="http://www.link-to-loading-anim.com/loading.gif"/>
    <form method="post">
    <input value="Click Me" type="submit"/>
</form>

Javascript：

// On dom ready, hide our loading animation
$('img.loading').hide();

// on form submit, show the animation,
$('form').submit(function(e){
    e.preventDefault(); // we dont really need to submit the form!!

    // Show our loading animation
    $('img.loading').fadeIn();

    // Optional: Hide the form..
    $('form').hide();

    // Do something here.. (AJAX Request)
    // - Your success of AJAX request..

    // Hide the image loader on success.. (setTimeout used for demo purposes)
    setTimeout(hideImageLoader, 2000);

});

function hideImageLoader(){
    $('img.loading').fadeOut('slow', function(){
        $('form').show();
    }); 
}

这是基本加载动画示例的JSfiddle。

Answer 4

您可以创建一个未附加到DOM的表元素，按需填写它，然后在生成完成后替换现有表，或者让服务器为您执行表格格式化，只需用已经格式化的ajax响应替换你的表。

JQuery：更新表内容需要太长时间

4 个答案: