Download di file di grandi dimensioni con jQuery e iFrame - È necessario un evento pronto per il file in modo da nascondere la gif di caricamento

Question

Sto utilizzando jQuery per scaricare alcuni file che richiedono del tempo per la creazione, quindi mostro una gif di caricamento per comunicare all'utente essere pazientare. Ma il problema è che la gif di caricamento viene mostrata e nascosta tutti in una frazione di secondo.

C'è un modo per nascondere la gif di caricamento dopo che il download è stato completato e l'utente ha il popup di salvataggio sullo schermo?

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(); 

---

la soluzione che ho finito per usare

<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

Ho riscontrato problemi con questo metodo in Chrome, quindi ho modificato tutto il mio codice jquery per cercare un cookie che il codice back-end abbia impostato al termine dell'elaborazione del download. Quando il jquery ha rilevato il cookie, ha disattivato la gif di caricamento & whiteout.

Detect when browser receives file download

Answer 1

Avere la iframeonload evento chiamare il codice:

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; 

Answer 2

iframe.src = url; 

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

Answer 3

suggerisco di separare la generazione di file da scaricare.

Dovrebbe esserci una chiamata che richiede al server di generare il file. Il server dovrebbe rispondere con un ID univoco per scaricarlo.

Un'altra chiamata deve essere semplice richiama una chiamata che può essere incorporata in iframe/lancia nuova finestra che scarica direttamente il file generato.

Basta mostrare la schermata di caricamento finché non si riceve la risposta per la prima chiamata.