將頁面加載從自動更改為單擊按鈕時

Question

好的，我有下面的代碼在頁面加載時放入頁面加載器，這個問題是我只希望頁面加載器在單擊按鈕時顯示，而不是每次頁面加載時顯示。

不幸的是，我不知道如何在下面的javascript代碼中實現它。

任何幫助將不勝感激。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<input type="submit" class="visitpage" name="Submit" value="Update Results" rel="nofollow"/>

$('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>');
$(window).on('load', function(){
  setTimeout(removeLoader, 500); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( "#loadingDiv" ).fadeOut(500, function() {
  // fadeOut complete. Remove the loading div
  $( "#loadingDiv" ).remove(); //makes page more lightweight 
  });  
}

Answer 1

您應該像這樣更改代碼

 $(".visitpage").on('click', function(){ $('body').append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>'); setTimeout(removeLoader, 500); //wait for page load PLUS two seconds. }); function removeLoader(){ $( "#loadingDiv" ).fadeOut(500, function() { // fadeOut complete. Remove the loading div $( "#loadingDiv" ).remove(); //makes page more lightweight }); } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="submit" class="visitpage" name="Submit" value="Update Results" rel="nofollow"/> 

唯一的變化是將顯示加載程序的事件顯示為異常，在這種情況下單擊按鈕。

Answer 2

這是干凈的代碼

<input type="submit" class="visitpage" name="Submit" value="Update Results"/>
<div id="loadingDiv"><div class="loader">Loading...</div></div>

<script>
$('#loadingDiv').hide();
$('.visitpage').on('click', function(){
    $('#loadingDiv').fadeIn();
    setTimeout(function(){
        $('#loadingDiv').fadeOut(); 
    }, 3000);
});
</script>

當然，您必須包括jQuery庫

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

請享用 ：）