Can JavaScript detect when the user stops loading the document?

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.

Answers:

Answer

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 IE1 (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).

1 To keep this answer up to date... the defer attribute is available in most modern browsers now.

Answer

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

Answer

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

Yes, you can!

These is no direct dom api to help you trigger the event when use stops loading the page. However, you can detect it under the help of two events:

1.The load event of window.

2.The readystatechange event of document.

chrome will triggle load and readystatechange event both when the page was loaded as normally. when user stops loading, chrome will triggle readystatechange event, however, load event will be ignored.

Here is a example code:

        var isLoaded = false;
        window.addEventListener("load", function () {
            isLoaded = true;
        });
        document.addEventListener("readystatechange", function () {
            if (document.readyState == "complete") {
                setTimeout(function() {
                    if (!isLoaded) {
                        console.log("abort");//HERE
                    }
                },100);
            }
        });

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us Javascript

©2020 All rights reserved.