How to display loading dialog when someone clicks a specific link?

Question

I do have an URL which opens a webpage which is very slow to load and I have no control over it.

I do want to display a loading dialog when someone clicks this URL or to block page with an overlay div when this happens.

Note: this is not the same question as the ajax related ones, this for normal URL clicks form the user, not all of them only specific ones.

<A href="http://veryslowload.com" onClick="...">slow load...</a>

I suppose that what I am looking for is what to put on the onClick.

Answer 1

You can do this :

$(function(){
​  $('a').click(function(){
     $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
  });​
});

Demonstration (change the link to a very slow page for best effect)

But it depends on the page : if the page sends immediately some content but not the whole content, you won't have the time to see your div.

Answer 2

This is an old topic, but if you want a simple solution that doesn't depend on JQuery add the following to onClick in your link:

<A href="http://veryslowload.com" onClick=""javascript:document.getElementById('page-loader').style.display='block';"">slow load...</a>

Then somewhere on your page, have a hidden DIV that includes what you want for the loading dialog.

<div id="page-loader">
  <h3>Loading page...</h3>
</div>

and hide the DIV with CSS as follows:

#page-loader {                                                                                                     
  position: absolute;                                                                                              
  top: 0;                                                                                                          
  bottom: 0;                                                                                                       
  left: 0;                                                                                                         
  right: 0;                                                                                                        
  z-index: 10000;                                                                                                  
  display: none;                                                                                                   
  text-align: center;                                                                                              
  width: 100%;                                                                                                     
  padding-top: 25px;                                                                                               
  background-color: rgba(255, 255, 255, 0.7);                                                                      
}

Here's a JSfiddle to a working example: http://jsfiddle.net/meb69vqd/

I can't take full credit for this example. There are additional tips about this technique here: https://css-tricks.com/css-page-loader/