Indicate Loading In Browser When Downloading File

Question

On our web application, we have loads of attachments, some static (from DB) and some dynamic (generated), some of the generated files take really long ( Content-Disposition: Attachment ) to download, and the user will click away sometimes. is there anyway to show and HIDE a loader as soon as the file is actually served to the browser?

I have looked for similar questions on stackoverflow and there are, but none of them with useful answers: for example .

Is this a viable question or should i just try to increase the speed at which the files are generated?

Answer 1

For that you can use the following post from this community:-

JavaScript/jQuery to download file via POST with JSON data

Use javascript post method that I mentioned first. Hope this finally answers your question. :)

Answer 2

You can use ajax code for doing form submit. While the server processes the request, show a div with loading icon at top of the page.

Write following code in your jsp.

<div  id="submitPage">
  <img src="/images/loading.gif" alt="">Submitting order...
</div>

initially hide it by using this code

$('#submitPage').hide();

and on click of your submit button just show it.

$('#submitPage').show();

Hide it again when ajax response comes.

Hope it solves your problem.

Regards, Lav

Answer 3

you need not load the page again. Simply play around with the ajax call with a bit of javascript manipulation. :)

$('#submitPage').show();

var url = "urlUsed";

$.post(url, $("#formName").serialize() , function(responseValue){                   

    $('#submitPage').hide();

});

If not this way, you can change ajax call as :-

function functionName(){
    ajaxRequest = createXMLHttpRequest(); 
    var url = "urlUsed";
    $('#submitPage').show();
    ajaxRequest.open('get', url , true);
    ajaxRequest.onreadystatechange = processAjaxResponseForMethodName;
    ajaxRequest.send(null);
}

function processAjaxResponseForMethodName(){
    if(ajaxRequest.readyState == 4) {  
           $('#submitPage').hide();

    }
}