Jquery show image while .show（）

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

は私がやると思います。そして、ローダーを示し、その後、200ミリ秒以内にテーブルを示すとされて

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

はローダーを非表示にします。

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(); 
     }); 
    } 

});