CODEWITHSUNDEEP
javascriptjqueryhtmlonclick
kcd
kcd

Reputation: 37

Simple onclick page loader

I made this really basic startup page in HTML that has images that reference websites. Is there a way to add a loader after the user clicks on the image then the loader goes away when the website comes up? I am trying to give users something to look at while a website loads. Below is a sample href line that I use.

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

I found this onclick script online but I do not know how to add it to my startup page. Can anyone help me put these together? Where should I place the line 'onclick="myFunction()?"'Thank you!

 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>

Upvotes: 1

Views: 26376

Answers (2)

Sravan
Sravan

Reputation: 18647

Here is an example of something you need,.

A loader will be displayed when you click on the button, and disappears after the website loads.

<!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

Upvotes: 3

maria.m
maria.m

Reputation: 110

You may refer to the following link, it properly explains, how it is too be done. http://blog.teamtreehouse.com/learn-asynchronous-image-loading-javascript

Upvotes: 2

Related Questions