How to display loading dialog when someone clicks

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 might want to look into Modal boxes. You can activate a model box when the ajax request is send and on success maybe close it. https://www.google.com/search?sugexp=chrome,mod=10&sourceid=chrome&ie=UTF-8&q=modal+box

Answer 2

Presumably, you'll want the loading dialog to appear immediately, then to disappear and be replaced by the new page when the new page has rendered?

Three ideas come to mind.

---

If you have control of the source page but not the target - Use a click event handler to replace the tags' normal behavior with something like this:

1. Display the loading animation
2. Fire an AJAX request to the URL defined by the tag's href attribute (alternately, create a hidden with the URL as its source)
3. When the request has completed, replace the document's contents with the response.

This can get really hairy, though, since you won't lose javascript and css defined in the original page. It also won't change the URL displayed in the user's browser.

---

If you have control of the target and can make the target cacheable (even for a few seconds): You could load the page in the background via AJAX and then redirect to it. The first load will be slow, then the redirect will load the page from cache.

---

And yet another alternative: If you have control of the target page, you can define an optional parameter such that if the parameter is present, the server returns a page consisting of only the loading animation and a bit of javascript that loads the actual page.

Answer 3

You can create a hidden iframe and listen for the load event. You will also need to do a manual check after about 1 sec, in case the destination has prevented x-frame content.

DEMO: http://jsbin.com/ijofih/1

$('a').click(function(e) {
    $(this).text('Loading...'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    setTimeout(function() {
        window.location = destination;
    },1000);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});

Answer 4

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/

Answer 5

Although ajax would be more elegant, it's possible. You have to intercept the navigation by preventing the default event, then force an update to the UI, then change the location to the destination url. Something like this:

$('#mylink').click(function(e) {
    e.preventDefault();
    var url = this.href;
    // Update the UI here
    setTimeout(function() {
        // This is a trick to force a repaint
        window.location.href = url;
    },0);
});

Answer 6

initially store a spinner.gif some where in your form and keep it hidden and also put src=""

thus there will be no src for image

but later on while making the ajax call you can set the src for the spinner image thus you page will seem to be loading

$(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'url to be called',
               type:'post',
               beforeSend:function()
               {
                   alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here");  
                   $("#spinner image ID").attr("src","../images/spinner.gif");
               },
               success:function(e){
               alert("do whatever you want with response here");
               }
        });
        });