如何在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 ...图表来了正常，但我需要设置加载图像时，我的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) { 
 
\t $('#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>