是否有一个确定的JavaScript(而不是jQuery)方法来检查网页是否已完全加载？

Question

是否有确定的JavaScript方法来检查网页是否已完全加载？完全,意味着100%完成.HTML,脚本,CSS,图像,插件,AJAX,一切!

由于用户交互可以影响AJAX,我们假设除了初始页面请求之外,没有与页面进一步的用户交互.

Answer 1

你所要求的几乎是不可能的.无法确定是否所有内容都已完全加载.原因如下:

• 在很多网页上,只有在onload(或DOMReady)事件触发时,AJAX才会启动,这使得使用onload事件的方法可以查看页面是否已加载不可能.
• 理论上,您可以通过覆盖来判断网页是否正在执行AJAX请求window.XMLHttpRequest,但您仍然无法确定Flash之类的插件是否仍在加载.
• 在某些网站上,例如Twitter.com,页面只加载一次,并且每次用户点击链接时都会向服务器发出AJAX请求.如何判断页面是否已在这样的页面上完成加载？
• 事实上,浏览器本身无法完全确定页面是否已完全加载,或者是否即将发出更多的AJAX请求.

只有这样,才能确切知道这一切是装载有每一个单件的代码加载的东西告诉你的代码,一旦加载,它已经完成了网页上.

一个hacky,不完整的解决方案:您可以尝试覆盖XMLHttpRequest包含现有的函数XMLHttpRequest并返回它.这将允许您判断当前是否正在进行AJAX事件.但是,该解决方案不适用于查看插件是否已加载,并且您无法区分在页面加载时触发的AJAX事件与定期发生的AJAX请求之间的区别,例如Stack Overflow上发生的更改如果您有新通知,则左上角的Stack Exchange图标.

尝试这样的事情:

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