0

I'm trying to create a custom "loading" animation that should start when the next page has started loading. In practice, I'd like to receive an event when the browser is starting to load the next toplevel frame regardless if the source of the load event is button click, link activation or JavaScript setting window.location.href. In addition, I'd like to receive the event when the loading is started, not when the next page is ready to be swapped over the current page.

I'd expect the code to be something along the lines

 window.document.addEventListener("???????", function (e) { ... });

can anybody point me to the correct event name?

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112
  • This may help: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload – Peter B Jun 08 '21 at 11:07
  • It is exactly clear how your setup is. `beforeunload` will be triggered right before you exit the current document, right after that the `window` object and its `document` will be destructed, so the loading event listener has to be set up in the new `window`/`document`. Or you use the History API and fetch and replace the content of the page programmatically. – t.niese Jun 08 '21 at 11:55
  • I don't agree that the document will be destructed "right after" the "beforeunload" event. If I add e.g. 5 second delay to server response, I get "beforeunload" immediately on clicking a link but the page will be swapped to next one after 5 second delay when the server actually sends the response (I tested Firefox and Google Chrome). However, I cannot find any spec that actually specifies this so the timing could be implementation defined. The behavior I see with Firefox and Chrome with "beforeunload" is the one I'm looking for, though. – Mikko Rantalainen Jun 08 '21 at 11:58

1 Answers1

0

It seems that window event beforeunload provides correct timing for at least Chrome and Firefox. I haven't yet found any spec that promises this, though.

The spec says only following (emphasis mine):

interface BeforeUnloadEvent : Event {
  attribute DOMString returnValue;
};

Note: There are no BeforeUnloadEvent-specific initialization methods.

The BeforeUnloadEvent interface is a legacy interface which allows prompting to unload to be controlled not only by canceling the event, but by setting the returnValue attribute to a value besides the empty string. Authors should use the preventDefault() method, or other means of canceling events, instead of using returnValue.

The returnValue attribute controls the process of prompting to unload. When the event is created, the attribute must be set to the empty string. On getting, it must return the last value it was set to. On setting, the attribute must be set to the new value.

Note: This attribute is a DOMString only for historical reasons. Any value besides the empty string will be treated as a request to ask the user for confirmation.

Mikko Rantalainen
  • 14,132
  • 10
  • 74
  • 112
  • Is [this](https://stackoverflow.com/questions/5107232/is-it-possible-to-programmatically-catch-all-events-on-the-page-in-the-browser) your answer? – Alireza Ahmadi Jun 08 '21 at 11:41
  • Yes, that's one way to attack the problem. I prefer looking at the specs and use something that's actually documented to work. I already know that `beforeunload` *seems* to work but the actual timing is not specified anywhere so it could be just a lucky accident. Querying possible events from actual browsers will not get me any closer than `beforeunload`. – Mikko Rantalainen Jun 08 '21 at 11:46