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. So, I concluded $iFrame.load(function() doesn't trigger anything. Got this code from JSFiddle. But in JSFiddle it is working.
<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>
I need to do an additional check for caches files (who fired the event, just before added an event handler listening for it). I tried the following jquery and it worked fine.
$iFrame.on('load', function() {
$('h3').html('PDF loaded...');
}).each(function() {
if(this.complete) $(this).load();
});