How to display page loader from the time button is submitted until the redirected page completes loading

Question

I am trying to implement a page loader using an ordinary overlay with a gif image when user clicks submit button. The submit button will perform a asp.net postback and then redirects to another page. That page might perform a postback to do some data retrieval.

Currently, the page loader will disappear when the redirected page displays as the page is still performing some data retrievals.

How can I persist the page loader to display until the redirected page loads completely?

Currently, I use this code to display loader

$('form').on('submit', function(){showLoader()});

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

This is something you can not do it from parent page. The reason being so is that whenever you redirects the page to some other domain, contents for that domain would be getting loaded. Thus keeping loader from previous page wont be possible.

What you can try is, show some function that shows loader till the page is loaded. and try invoking it when you open the page through parent window.

See This

edited May 23 '17 at 10:31

Community

1
1

answered Jan 28 '14 at 10:44

Milind Anantwar

81,290
25
94
125

I am not opening another window. Its a plain redirect. Wondering if c# can track http request and response (end-to-end) in global.asax – Unomono Jan 28 '14 at 11:09
unfortunetely Same thing goes for `response.redirect` and you can not control it, – Milind Anantwar Jan 28 '14 at 11:44

score 0 · Answer 2 · answered Jan 28 '14 at 11:41

I Suppose you haved used master/content pages structures. For this you can try following code on master page.

 window.onbeforeunload = showLoader;
    function showLoader() {

        var id = '#overlay_form';
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });
        $('#mask').fadeIn(1000);
        $('#mask').fadeTo("slow", 0.4);
        var winH = $(window).height();
        var winW = $(window).width();
        $(id).css('top', (winH / 2 - $(id).height() / 2 - 20));
        $(id).css('left', winW / 2 - $(id).width() / 2);
        $(id).fadeIn(2000);
    }

How to display page loader from the time button is submitted until the redirected page completes loading

2 Answers2