downloading a file triggers beforeunload function

<?php
$_SESSION['pdf']="example.pdf";
?>
<div id="loading">loading.gif</div>
<button onclick="download_pdf();">download</button>
<script>
$(window).on('beforeunload', function(event) {
   $('#loading').show();

  });
$(window).on('load', function(event) {
    $('#loading').hide();
});
function download_pdf(){
window.location.href="download.php";
}
</script>

<?php
session_start();
$pdf=$_SESSION['pdf'];
header("Content-disposition: attachment; filename=$pdf");
header("Content-type: application/pdf");
header('Content-Length: ' . filesize($pdf));
readfile($pdf);
header("Location:ref.php");
?>

$(window).on('beforeunload', function(event) {
   $('#loading').show();    
   });