如何在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>