When downloading a pdf file, loading icon keeps on displaying in the page. It seems like beforeunload function (which shows loading icon) is getting triggered when downloading a file though page is not unloaded. What would be the mistake in my code?
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
</head>
<body>
<script>
$(window).on('beforeunload', function(event) {
$('#loading').show();
});
$(window).on('load', function(event) {
$('#loading').hide();
});
</script>
<div id="loading">Loading...</div>
<a href="t1.php?pdf=<?php echo 'Intro.pdf';?>"><button>download</button></a>
<?php
if(isset($_GET['pdf'])){
$bbpdf = $_GET['pdf'];
header("Pragma: public"); // required
header("Expires: 0");
header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
header("Cache-Control: private", false); // required for certain browsers
header("Content-Type: application/pdf");
header("Content-Disposition: attachment; filename=\"" . basename($bbpdf));
header("Content-Transfer-Encoding: binary");
header("Content-Length: " . filesize($bbpdf));
ob_clean();
flush();
readfile($bbpdf);
}
?>
</body>
</html>
