JQuery:更新表内容花费的时间太长

JQuery: Updating table content takes too long

本文关键字：时间 更新 JQuery      更新时间：2023-09-26

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

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()"之间添加一些动画，以避免出现空白屏幕，从而实现无缝过渡？

如果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);

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

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

您可以创建一个未附加到DOM的表元素，根据需要填充它，然后在生成完现有表后替换它，也可以让服务器为您完成表的格式化，只需用已经格式化的ajax响应替换您的表。

相关文章：