title: Downloading large files with jQuery & iFrame - Need a File Ready event so I can hide the loading gif
body: <p>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. </p>
  
  <p>Is there a way for me to hide the loading gif after the download is complete and the user has the Save File popup on the screen?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;tr data-report_id="5"&gt;
      &lt;td&gt;
          &lt;input type="button" id="donwload"&gt;&lt;/input&gt;
          &lt;img class="loading" src="/Images/Loading.gif"/&gt;
          &lt;iframe id="hiddenDownloader"&gt;&lt;/iframe&gt;
      &lt;td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><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';
      document.body.appendChild(iframe);
  }
  iframe.src = url;
  $(".loading").hide();
  </code></pre>
  
  <hr>
  
  <p>THE SOLUTION I ENDED UP USING</p>
  
  <pre><code>&lt;script&gt;
  $("#download").on("CLICK", function () {
      var button = $(this);
      button.siblings(".loading").show();
  
      var rowNumber = GetReportId();
      var url = GetUrl();
      button.after('&lt;iframe style="display:none;" src="' + url + '" onload="loadComplete(' + rowNumber + ')" /&gt;');
  }
  
  function loadComplete(rowNumber) {
      var row = $("tr[data-row_number=" + rowNumber + "]");
      row.find(".loading").hide();
  }
  &lt;/script&gt;
  
  &lt;tr data-report_id="5"&gt;
      &lt;td&gt;
          &lt;input type="button" id="download"&gt;&lt;/input&gt;
          &lt;img class="loading" src="/Images/Loading.gif" style="display:none;"/&gt;
      &lt;td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>UPDATE</p>
  
  <p>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 &amp; whiteout.</p>
  
  <p><a href="https://stackoverflow.com/questions/1106377/detect-when-browser-receives-file-download">Detect when browser receives file download</a></p>