javascript - 在javascript中实现加载旋转轮

Question

在我的网站中，我需要在单击按钮时弹出一个虚拟“加载”旋转轮，并在一段时间后消失。这只是一个虚拟页面。如果有人能解释如何做这样的事情，我将非常感激。我可以使用 javascript 或 jQuery 来完成此操作吗？

提前致谢

Answer 1

在您需要的正确位置放置一个 div/图像，第一次加载页面时将其隐藏。就像

<input type="button" id="button"/>
  <div id="load"><img src="http://jimpunk.net/Loading/wp-content/uploads/loading1.gif"/>
</div>

并在您的jquery中，为按钮的单击事件设置处理程序以显示或隐藏div

$(document).ready(function(){
  $('#button').click(function(){
    $('#load').show();
    setTimeout(function() {$('#load').hide()}, 2000);
  });
});

setTimout 可用于在一段时间后隐藏 div。检查工作示例 here