Question

当我点击按钮时，我想要显示一张大桌子。

这里是代码，到目前为止没什么大不了的：

$(".show_table_button").on("click", function() {
    $('#load').css('visibility', 'visible');
    $("#my_table").show();
    // Commented $('#load').css('visibility', 'hidden');
});

我的问题是#my_table有很多数据，需要花一点时间才能显示，所以我想同时显示加载图像，但这段代码不起作用。加载图像（#load）仅在显示表（#my_table）后显示...

任何可能有帮助的想法？

Answer 1

我做：

 $('#load').fadeIn(0, function() {
    $("#my_table").fadeIn(200, function() { 
        $('#load').hide(); 
    });
 });

显示加载程序，然后在200毫秒内显示表，然后隐藏加载程序。

Answer 2

Spinner.js

$(document).ready(function(){
    var spinner = $('#load');
    $(window).on("showSpinner", function(){
         spinner.fadeIn();
    });
    $(window).on("hideSpinner", function(){
         spinner.fadeOut();
    });
});

HTML：由于您已经拥有页面中的所有html，因此请在最后一行添加自定义属性。

<tr last-row>Your content</tr>

你的JS

var tableComplete = false;
$(document).ready(function(){
    $("#my_table tr[last-row]").on("load", function(){
        tableComplete = true;
    });
$(".show_table_button").on("click", function() {
    if(tableComplete){
        $("#my_table").fadeIn();
    }
    else{
        $(window).trigger("showSpinner");
        $("#my_table tr[last-row]").off("load").on("load", function(){
            tableComplete = true;
            $(window).trigger("hideSpinner");
            $("#my_table").fadeIn();
        });
    }

});

Jquery显示图像而.show（）

2 个答案: