4

I want to show loading icon until pdf is loaded into the webpage.I have pasted what I have tried but loading icon keeps on displaying even the pdf is loaded fully. Got this code from JSFiddle

    <html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style>
iframe {
    width: 100%;
    height: 100%;
    border: 5px solid green;
}
</style>
<script>
$(function(){
    var $iFrame = $('iframe'); 
    $iFrame.load(function(){
        $('h3').html('PDF Loaded!');
    });

    $('h3').html('Loading PDF...');
    $iFrame.attr('src', 'http://listic.ru/jQuery_Cookbook.pdf');


});
</script>
</head>
<body>
<h3></h3>
<iframe></iframe>
</body>
</html>
Learning
  • 848
  • 1
  • 9
  • 32
  • are you getting any errors in your console? i have tried running the code and i see the pdf url does take a while to load. – anurupr Aug 11 '15 at 13:00

1 Answers1

1

You can't just use an iFrame to display a PDF. If you want to embed a PDF onto a webpage, you should use a JavaScript library like pdf.js.

Anyway, use this http://jsfiddle.net/BXe8C/497/

The $(document).ready(function() { event fires as soon as the DOM (document) has downloaded.

The $(document).load(function() { event fires when all on page elements have completely loaded.

So use a JavaScript library like https://github.com/mozilla/pdf.js to render the PDF, and use that jQuery event above to listen for when the page has completely loaded.

Daniel Dewhurst
  • 2,533
  • 2
  • 21
  • 39