1

我使用 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()"以避免空白屏幕，使其无缝过渡？

4

4 回答 4

1

如果showTable()正在做的是“处理数据，添加不同的图标，文本......，将其附加到 [your] table”，那么它可能看起来像这样：

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

您首先应该知道的是，将 HTML 尽可能长时间地保存在字符串中，然后将其放入 jQuery 对象并将其附加到 DOM，而不是创建多个将附加到 DOM 的多个 jQuery 对象，这样会更快。次也是。因此，您最好执行以下操作：

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);
于 2012-08-03T16:03:16.083 回答
0

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

于 2012-08-03T16:01:33.943 回答
0

在您的 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。

于 2012-08-03T16:08:59.010 回答
0

您可以创建一个未附加到 DOM 的表格元素，根据需要填充它，然后在生成完成后替换现有表格，或者您可以让服务器为您执行表格的这种格式化，并且简单地用已经格式化的 ajax 响应替换您的表。

于 2012-08-03T16:20:33.323 回答