如何在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...charts绘制图表是正确的，但我需要设置加载图像时，我点击button...this代码不工作

当onclick按钮时如何设置加载图像？

Answer 1

​

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

​

Answer 2

你只需要为它设置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>

​