Question

我在HTML中创建了这个非常基本的启动页面，其中包含引用网站的图像。有没有办法在用户点击图像后添加加载程序，然后加载程序在网站出现时消失？我想在网站加载时给用户一些东西。下面是我使用的示例href行。

<a href="https://Website.com"><img border="0" alt="Image" src="logo.gif"></a>

我在网上找到了这个onclick脚本，但我不知道如何将它添加到我的启动页面。谁能帮我把这些放在一起？我应该在哪里放置'onclick =“myFunction（）行？”'谢谢！

 onclick="myFunction()"

 <script>
 var myVar;

 function myFunction() {
 myVar = setTimeout(showPage, 3000);
 }

 function showPage() {
 document.getElementById("loader").style.display = "none";
 document.getElementById("myDiv").style.display = "block";
 }
 </script>

Answer 1

以下是您需要的一个例子。

单击按钮时将显示加载程序，并在网站加载后消失。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>

$(document).ready(function(){
   var myVar;
 $( "#myDiv" ).click(function() {
  	myFunction(this);
});

 function myFunction(div) {
 $("#loader").toggle();
 $(div).toggle();

 }

   
});
</script>
</head>
<body>
<a id="myDiv" href="https://Website.com">Click me</a>
<div id="loader" style="display:none;background:green;padding:150px">This is a loader</div>


</body>
</html>

Here is a working DEMO

Answer 2

您可以参考以下链接，它正确地解释了它是如何完成的。 http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript

简单的onclick页面加载器

2 个答案: