It's not entirely clear what you want to do.
You can find out when the current page started unloading using the window.onunload
event. However, as soon as the next page starts loading, the browser will destroy the previous one along with all the icons, elements and code, and your download icon will disappear. In fact, in this way you will display it for a split second.
To implement what you want , you need to load pages with AJAX without destroying the current page . If you load pages by links using AJAX (i.e., a javascript request), you can do the following.
- The user clicks the link, your JavaScript-handler of this event is called.
- You show the download icon , then start the download itself using AJAX (specifically in jQuery -
$.get
, $.post
, $.ajax
and the like). - When the loading is completed in the handler function, you, among other things, remove the loading icon and replace the old content of the page with the newly received one.
A crutch, but it's better to realize nothing yet.