I'm using jQuery to download some files that take some time to create, so I show a loading gif to tell the user to be patient. But the problem is, the loading gif is currenntly shown and hidden all within a split second.

Is there a way for me to hide the loading gif after the download is plete and the user has the Save File popup on the screen?

HTML

<tr data-report_id="5">
    <td>
        <input type="button" id="donwload"></input>
        <img class="loading" src="/Images/Loading.gif"/>
        <iframe id="hiddenDownloader"></iframe>
    <td>
</tr>

JS

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
iframe.src = url;
$(".loading").hide();

THE SOLUTION I ENDED UP USING

<script>
$("#download").on("CLICK", function () {
    var button = $(this);
    button.siblings(".loading").show();

    var rowNumber = GetReportId();
    var url = GetUrl();
    button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />');
}

function loadComplete(rowNumber) {
    var row = $("tr[data-row_number=" + rowNumber + "]");
    row.find(".loading").hide();
}
</script>

<tr data-report_id="5">
    <td>
        <input type="button" id="download"></input>
        <img class="loading" src="/Images/Loading.gif" style="display:none;"/>
    <td>
</tr>

UPDATE

I was having problems with this method in Chrome so I changed all my jquery code to look for a cookie that the back end code set when the download had finished processing. When the jquery detected the cookie, it turned off the loading gif & whiteout.

Detect when browser receives file download

I'm using jQuery to download some files that take some time to create, so I show a loading gif to tell the user to be patient. But the problem is, the loading gif is currenntly shown and hidden all within a split second.

Is there a way for me to hide the loading gif after the download is plete and the user has the Save File popup on the screen?

HTML

<tr data-report_id="5">
    <td>
        <input type="button" id="donwload"></input>
        <img class="loading" src="/Images/Loading.gif"/>
        <iframe id="hiddenDownloader"></iframe>
    <td>
</tr>

JS

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    document.body.appendChild(iframe);
}
iframe.src = url;
$(".loading").hide();

THE SOLUTION I ENDED UP USING

<script>
$("#download").on("CLICK", function () {
    var button = $(this);
    button.siblings(".loading").show();

    var rowNumber = GetReportId();
    var url = GetUrl();
    button.after('<iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" />');
}

function loadComplete(rowNumber) {
    var row = $("tr[data-row_number=" + rowNumber + "]");
    row.find(".loading").hide();
}
</script>

<tr data-report_id="5">
    <td>
        <input type="button" id="download"></input>
        <img class="loading" src="/Images/Loading.gif" style="display:none;"/>
    <td>
</tr>

UPDATE

I was having problems with this method in Chrome so I changed all my jquery code to look for a cookie that the back end code set when the download had finished processing. When the jquery detected the cookie, it turned off the loading gif & whiteout.

Detect when browser receives file download

• javascript
• jquery
• iframe
• download

3 Answers 3

Have the iframe onload event call your code:

var reportId = $(this).closest("tr").attr("data-report_id");
var url = "/Reports/Download?reportId=" + reportId;

var hiddenIFrameId = 'hiddenDownloader';
var iframe = document.getElementById(hiddenIFrameId);
if (iframe === null) {
    iframe = document.createElement('iframe');
    iframe.id = hiddenIFrameId;
    iframe.style.display = 'none';
    iframe.onload = function() {
        $(".loading").hide();
    };
    document.body.appendChild(iframe);
}

iframe.src = url;

iframe.src = url;

$(iframe).load(function() {
    $(".loading").hide();
});

I suggest to separate the file generation from downloading.

There should be one call which request server to generate file. Server should respond with unique id to get it downloaded.

Another call should be simple get call that can be embedded into iframe/launch new window which directly download the generated file.

Just show loading screen till you receive the response for first call.