如何在d3中加载图表后隐藏加载图像？

Question

 $(document).on('click', '.tbtn', function(e) {
    $('#loading-image').show();
    if(error){
    $('loading-image').hide();
   else{
    val = $('.barbtn input:checked').val();  
    draw_summary($.parseJSON(data['summary']),val);
    draw_barchart($.parseJSON(data['barchart']),val);
    draw_scatter($.parseJSON(data['table']),val);
    $('#loading-image').show();
  }
});

这里我有使用d3的绘图图表...图表正确显示但是当我点击按钮时我需要设置加载图像...此代码无法正常工作

点击按钮时如何设置加载图像？

Answer 1

你只需要为它设置CSS。否则你正走在正确的道路上。请查看下面的代码段。

$(document).on('click', '.tbtn-hide', function(e) {
	$('#loading-image').hide(); //hide loader
});
$(document).on('click', '.tbtn-show', function(e) {
    $('#loading-image').show(); //show loader
});

#loading-image
    {
        background: white url("http://smallenvelop.com/demo/simple-pre-loader/images/loader-64x/Preloader_1.gif") no-repeat scroll center center;;
        height: 80%;
        left: 0;
        position: fixed;
        top: 10;
        width: 100%;
        z-index: 9999;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="tbtn-hide">Hide</button>
<button class="tbtn-show">show</button>
<div id="loading-image" style="display:none">
</div>

Answer 2

$(document).on('click', '.tbtn', function(e) {
  $('#loading-image').show();
  $.ajax({
    success:function(result){
      val = $('.barbtn input:checked').val();  
      draw_summary($.parseJSON(data['summary']),val);
      draw_barchart($.parseJSON(data['barchart']),val);
      draw_scatter($.parseJSON(data['table']),val);
      $('#loading-image').hide();
    }
  });
});