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

Jase 发表于 Dev

亚瑟

好的，我有下面的代码在页面加载时放入页面加载器中，这个问题是我只希望页面加载器在单击按钮时显示，而不是在每次页面加载时显示。

不幸的是，我不知道如何在下面的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 
  });  
}

丹尼尔·斯托克（DanielŠtorc）

您应该像这样更改代码

$(".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"/>

唯一的变化是将显示加载程序显示为事件，在这种情况下单击按钮。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。