Pobieranie dużych plików za pomocą jQuery i iFrame - potrzebne jest zdarzenie Gotowe na plik, dzięki czemu mogę ukryć ładowany gif

Question

Używam jQuery do pobrania plików, których tworzenie zajmuje trochę czasu, więc pokazuję gif ładujący, aby poinformować użytkownika, bądź cierpliwy. Problem polega jednak na tym, że gif ładujący jest pokazany i ukryty w ciągu ułamka sekundy.

Czy istnieje sposób, aby ukryć ładujący się dokument gif po zakończeniu pobierania, a użytkownik ma wyskakujące okno Zapisz plik na ekranie?

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

---

ROZWIĄZANIE I skończył przy użyciu

<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

Mam problemy z tą metodą w przeglądarce Chrome, więc zmieniłem cały mój kod jquery, aby wyszukać plik cookie, który został ustawiony przez kod zakończenia po zakończeniu pobierania. Kiedy jQuery wykrył plik cookie, wyłączył on ładowanie gifa & whiteout.

Detect when browser receives file download

Answer 1

Mają iframeonload zdarzeń nazywają swój kod:

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

Proponuję oddzielić generowanie pliku z pobraniem.

Powinno być jedno połączenie, które zażąda od serwera wygenerowania pliku. Serwer powinien odpowiedzieć unikalnym identyfikatorem, aby go pobrać.

Innym połączeniem powinno być proste wywołanie, które można osadzić w elemencie iframe/uruchomić nowe okno, które bezpośrednio pobiera wygenerowany plik.

Po prostu pokaż ekran ładowania, dopóki nie otrzymasz odpowiedzi na pierwsze połączenie.