javascript - 将页面加载从自动更改为单击按钮时

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"/>

唯一的变化是将显示加载器分配给不同的事件，在本例中是单击按钮。