How to show a loading icon until the pdf file loads in an iframe

I have series of PDF files links in one page. When user clicks any of them, a new windows opens up with with header and footer and an <iframe>. Inside that IFRAME, I am loading that PDF file.

Now PDF file is taking time to load, I want t开发者_如何学Goo show a loading icon until PDF file has completed loading.

By using my code the browser hiding the loading icon hides the loading when the Iframe is loaded. So need your help how to determine when Pdf is ready or loaded in Iframe.

code

$("#iframe").load(function(){  //Iframe is the id of Ifrmae
    $("#loadingicon").hide();  //loadingicon is id of the Loading Icon div
    $("#iframe").show();
});

---

I can tell you right off the bat that you're not using the .load method correctly.

.load is for ajax requests or to quote the docs

Description: Load data from the server and place the returned HTML into the matched element.

Now if you were loading a url like

$("#iframe").load('/pdf.pdf');

then it makes sense.

To show if something is loaded yet like this you would do something like

$('#iframe').css('background', 'url(/spinny.gif)');
$("#iframe").load('/pdf.pdf');

That way the gif shows until the pdf is loaded from the server.

---

May be this is what you expected.

   $("#loadingicon").show();
   $("#iframe").hide(); 

    $('#iframe').load('\file.pdf', function() {
      $("#loadingicon").hide(); // this calls after load completes
      $("#iframe").show(); 
    })