CODEWITHSUNDEEP
javascriptjqueryhtml
caldf
caldf

Reputation: 71

Loading image when clicking away from a page

So im currently using this code to show a loading image when logging in.

HTML

<div id="overlay">
<div class="spinner"></div> 
</div>

JavaScript 

var overlay = document.getElementById("overlay");

window.addEventListener('load', function(){
  overlay.style.display = 'none';
})

This code works as it should, but im have the problem that when someone logs in, the website takes a while to load on the login in screen before it is then taken to the dashboard screen. So i was wondering if there was a way of add this loading image on a screen as you click away from it, whilst it loads but still hasn't gone onto the next page?

I hope that makes sense, thank you in advance for any help!

Upvotes: 1

Views: 143

Answers (2)

Bitz
Bitz

Reputation: 1148

Sounds like you only want your overlay going away when the page is fully done loading; am I correct? 

window.onload = function () { 
         document.getElementById("overlay").style.display = 'none'; 
      }

Upvotes: 0

Oleg Zlodkov
Oleg Zlodkov

Reputation: 56

Usually you don't need the spinner on the next page, you want to apply the spinner on the first page before the next page is returned, so probably you want to attach the event to onclcik of the login button of the first page. something like:

var bttn = document.getElementById('yourButtonId');
bttn.addEventListener('click', function(){
      overlay.style.display = '';
    });

Upvotes: 1

Related Questions