CODEWITHSUNDEEP
jquery
Raj
Raj

Reputation: 69

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

Upvotes: 2

Views: 4073

Answers (2)

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21366

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

Upvotes: 0

austinbv
austinbv

Reputation: 9491

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.

Upvotes: 1

Related Questions