I have a page with a list of mp3 urls. When you click on a specific item it fires off this javascript to download the mp3 file.
$(document).on('click', "a.item", function(e) {
var a_href = ($(this).closest('li').find('a.item').attr('href'));
e.preventDefault();
window.location.assign('download.php?q='+a_href);
});
this goes to a separate page (download.php) with this code:
$file= $_GET['q'];
header("Content-Type: audio/mp3");
header("Content-Disposition: attachment; filename=audio.mp3");
echo file_get_contents($file);
This works great and gives me the save or open dialog box. The problem is that the file may take a long time to get the contents, and so I can put a loading image up when the click occurs, but I need a way to identify when the save or open dialog box appears (so I can stop the loading image). Is there any way to do this?