Can JavaScript detect when the user stops loading the document?

Question

I'm implementing Comet using the script tag long polling technique, based on this page.

One issue (that I don't think there's a solution for) is the "throbber of doom" - the browser continues to show the document as "loading" forever and leaves the Stop button on the toolbar enabled. This kind of makes sense, because the document is still loading and while it's not ideal, I think I can live with it.

The second issue, though, is that if the user actually clicks Stop then the browser stops loading my script tag and I have to rely on a timeout to restart Comet. This means that if my timeout is, say 20 seconds, the page may not be updated for up to 20 seconds after the user clicks Stop. My question is: is there any way to detect when they do this? I can detect when they press escape using the onkeydown event, but not if they use the toolbar button or menu item to stop loading.

The solution needs to work in Firefox 3.5 and Chrome 3.0.

Answer 1

I asked the very same a very similar question a few days ago and the general notion was no.

Answer 2

Looks like the DOMContentLoaded event does the trick in Firefox 3.5 - it's fired the first time the user stops loading the page. After that the Stop button is disabled. The user can still press Escape to stop loading again, but I can detect that using onkeydown.

However, this doesn't work in Chrome - it fires DOMContentLoaded as soon as the page loads, without waiting for my dynamically generated <script> tags.

Answer 3

As I suggested in the comments... add the script in the onload event.

Edit: I guess I can explain my reasoning for the suggestion, hopefully it'll help others trying to save the same problem.

A browser will continue to "load" (and thus play the throbber) until it has fired the onload event for every "window" (each DOM tree with a global window parent) in a given window or tab. Many outside resources are able to download in parallel, but by default—and in fact, there is no escaping this default in any browser except IE (using the defer attribute on the <script> tag)—<script> resources will "block" further processing of the document. If the <script> resource request never completes, the page's onload event never fires (and there are other side effects as well, if there is content after the <script> in the DOM: the DOM may never be fully loaded, and resources after that <script> may never load at all), and thus never finishes "loading".

Carrying on from that, you may also be able to improve performance by adding an initial <script> at when the DOM is loaded, with a defer attribute for IE, and cutting the connection for other browsers when you expect the onload event would fire (this is hard to pinpoint exactly and may require experimentation).