是否存在确定的JavaScript(不是jQuery)方法来检查网页是否已完全加载? [英] Is there a definitive JavaScript (not jQuery) method for checking whether or not a web page has loaded completely?

问题描述

是否存在用于检查网页是否已完全加载的确定性JavaScript方法?完全完成，表示100％完成.HTML，脚本，CSS，图像，插件，AJAX，一切！

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!

由于用户交互可以影响AJAX，因此，除初始页面请求外，我们假设没有其他用户与页面进行交互.

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

推荐答案

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

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

• 在许多网页上，AJAX仅在触发 onload (或 DOMReady )事件后才启动，从而成为使用 onload 的方法事件，以查看页面是否无法加载.
• 从理论上讲，您可以通过覆盖 window.XMLHttpRequest 来判断网页是否正在执行AJAX请求，但是您仍然无法确定Flash是否仍在加载.
• 在某些网站上，例如 Twitter.com ，该页面仅加载一次，并且每次仅向服务器发出AJAX请求用户单击一个链接.您如何判断该页面是否已在类似页面上完成加载?
• 实际上，浏览器本身无法完全确定页面是否已完全加载完毕，或者是否将发出更多AJAX请求.

• 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.

一个骇人听闻的，不完整的解决方案:您可以尝试使用包装现有 XMLHttpRequest 并将其返回的函数覆盖 XMLHttpRequest .这将使您知道当前是否正在发生AJAX事件.但是，该解决方案不适用于查看是否已加载插件，并且您无法分辨页面加载时触发的AJAX事件与定期发生的AJAX请求(例如Stack Overflow中发生变化的请求)之间的区别如果您有新的通知，请点击左上方的Stack Exchange图标.

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.

尝试这样的事情:

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

这篇关于是否存在确定的JavaScript(不是jQuery)方法来检查网页是否已完全加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！