Question

Is there a definitive JavaScript method for checking whether or not a web page has loaded completely? Completely, meaning 100% complete. HTML, scripts, CSS, images, plugins, AJAX, everything!

As user interaction can effect AJAX, let’s assume there is no further user interaction with the page, apart from the initial page request.

Answer 1

What you’re asking for is pretty much impossible. There is no way to determine whether everything has loaded completely. Here’s why:

• On a lot of webpages, AJAX only starts once the onload (or DOMReady) event fires, making the method of using the onload event to see if the page has loaded impossible.
• You could theoretically tell if the webpage was performing an AJAX request by overriding window.XMLHttpRequest, but you still couldn’t tell if plugins like Flash were still loading or not.
• On some sites, like Twitter.com, the page only loads once and simply makes AJAX requests to the server every time the user clicks a link. How do you tell if the page has finished loading on a page like that?
• In fact, the browser itself can’t be completely certain whether the page has completely finished loading, or whether it’s about to make more AJAX requests.

The only way to know for sure that everything loaded is to have every single piece of code on the page that loads something tell your code that it has finished once it loads.

---

A hacky, incomplete solution: You could try overriding XMLHttpRequest with a function that wraps the existing XMLHttpRequest and returns it. That would allow you to tell if a AJAX event is currently taking place. However, that solution wouldn’t work for seeing if plugins are loaded, and you wouldn’t be able to tell the difference between AJAX events that are triggered at page load and AJAX requests that happen periodically, like the ones on Stack Overflow that change the Stack Exchange icon on the top-left if you have new notifications.

Try something like this:

(function(oldHttpRequest){
  // This isn't cross-browser, just a demonstration
  // of replacing XMLHttpRequest

  // Keep track of requests
  var requests_running = 0;

  // Override XMLHttpRequest's constructor
  window.XMLHttpRequest = function() {
    // Create an XMLHttpRequest
    var request = new oldHttpRequest();

    // Override the send method
    var old_send = request.send;
    request.send = function () {
      requests_running += 1;
      old_send.apply(request, arguments);
    };

    // Wait for it to load
    req.addEventListener("load", function() {
      requests_running -= 1;
    }, false);

    // Return our modified XMLHttpRequest
    return request;
  };

  window.addEventListener("load", function() {
    // Check every 50 ms to see if no requests are running
    setTimeout(function checkLoad() {
      if(requests_running === 0)
      {
        // Load is probably complete
      }
      else
        setTimeout(checkLoad, 50);
    }, 50);
  }, false);
})(window.XMLHttpRequest)