Question

11

Simple onclick page loader

rated 0 times [ 15] [ 4] / answers: 1 / hits: 24200 / 7 Years ago, wed, march 1, 2017, 12:00:00

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>

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jesse

Add To Favorites

Follow

Total Points: 513

Total Questions: 118

Total Answers: 106

Location: Denmark

Member since Tue, Jul 19, 2022

2 Years ago

answered 7 Years ago darleneh · Accepted Answer

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