检测页面是否已完成加载答案

【问题标题】：Detect if page has finished loading检测页面是否已完成加载
【发布时间】：2011-10-28 08:40:42
【问题描述】：

有没有办法检测页面何时完成加载，即所有内容、javascript 和资产（如 css 和图像）？

很喜欢：

if(PAGE HAS FINISHED LOADING)
{
// do something amazing
}

另外，如果页面加载时间超过 1 分钟，则执行其他操作，例如：

if(PAGE HAS BEEN LOADING FOR 1 MIN)
{
// do something else amazing
}

我看到像 Apple 的 MobileMe 这样的网站进行了类似的检查，但无法在其庞大的代码库中找到它。

谁能帮忙？

谢谢

编辑：这基本上就是我想要做的：

// hide content
$("#hide").hide();

// hide loading
$("#loading").hide();

// fade in loading animation
setTimeout($('#loading').fadeIn(), 200);

jQuery(window).load(function() {
  $("#hide").fadeIn();

  $("#loading").fadeOut(function() {
    $(this).remove();
    clearInterval(loadingAnim);
  });

  setTimeout(function() {
    $("#error").fadeIn();
  }, 60000);
});

【问题讨论】：

window.onload（或$(window).load()）是否有原因不起作用？
嗨@Cameron。页面加载完成后，哪个代码可以隐藏加载器？
@TonyNg 查看我的回答：stackoverflow.com/questions/7083693/…

标签： jquery

【解决方案1】：

在 cmets 中询问的人仅供参考，这是我在项目中实际使用的：

function onLoad(loading, loaded) {
    if(document.readyState === 'complete'){
        return loaded();
    }
    loading();
    if (window.addEventListener) {
        window.addEventListener('load', loaded, false);
    }
    else if (window.attachEvent) {
        window.attachEvent('onload', loaded);
    }
};

onLoad(function(){
   console.log('I am waiting for the page to be loaded');
},
function(){
    console.log('The page is loaded');
});

【讨论】：

【解决方案2】：

没有 jquery 或类似的东西，因为为什么不呢？

var loaded=0;
var loaded1min=0;
document.addEventListener("DOMContentLoaded", function(event) {
   loaded=1;
    setTimeout(function () {
      loaded1min=1;
    }, 60000);
});

【讨论】：

这是正确的，但与jquery 执行的操作略有不同。 DOMContentLoaded 仅在加载外部内容（尤其是图像，在某些情况下可能需要很长时间）后才会触发。 jquery 使用浏览器特定事件执行 .ready()，这（在大多数浏览器上）发生在加载外部内容之前。

【解决方案3】：

var pageLoaded=0;

$(document).ready(function(){
   pageLoaded=1;
});

使用 jquery：https://learn.jquery.com/using-jquery-core/document-ready/

【讨论】：

【解决方案4】：

另一个选项你可以检查document.readyState 喜欢，

var chkReadyState = setInterval(function() {
    if (document.readyState == "complete") {
        // clear the interval
        clearInterval(chkReadyState);
        // finally your page is loaded.
    }
}, 100);

从readyState Page的文档中完整状态的摘要是

在文档加载时返回“正在加载”，一旦加载则返回“交互” 已完成解析但仍在加载子资源，并且“完成” 一旦加载完成。

【讨论】：

我一直有缓存图像的问题，这似乎是性能更好的代码......想知道实践吗？似乎比 jQuery $(window).on("load" function () {//dostuff})...？

【解决方案5】：

jQuery(window).load(function () {
    alert('page is loaded');

    setTimeout(function () {
        alert('page is loaded and 1 minute has passed');   
    }, 60000);

});

或http://jsfiddle.net/tangibleJ/fLLrs/1/

有关 jQuery(window).load 的说明，另请参阅 http://api.jquery.com/load-event/。

更新

关于 javascript 加载的工作原理以及 DOMContentLoaded 和 OnLoad 这两个事件的详细说明可以在 this page 上找到。

DOMContentLoaded：当 DOM 准备好进行操作时。 jQuery 捕获此事件的方式是使用jQuery(document).ready(function () {});。

OnLoad：当 DOM 准备就绪并且所有资产（包括图像、iframe、字体等）都已加载且纺车/小时班消失。 jQuery捕获这个事件的方式就是上面提到的jQuery(window).load。

【讨论】：

如果您查看我的 OP，我已对其进行了修改，以显示我的目标。所以基本上我想在所有资产加载后显示页面并淡出加载器并淡入内容。我的代码能正常工作吗？干杯
您的代码看起来不错，但我必须亲眼看到它才能确定。
@Jimmer 是：MDN：“资源及其依赖资源完成加载时会触发加载事件。”
请注意 jQuery.load() 自 jQuery/1.8 以来已被弃用，并在 jQuery/3 中被删除。当前语法是jQuery(window).on("load", function(){/*...*/});。

【解决方案6】：

在 jquery 中有两种方法可以做到这一点，具体取决于您要查找的内容..

使用 jquery 你可以做到

//这将在调用此之前等待文本资源加载（dom..css..js）
```
$(document).ready(function(){...});
```
//这将等待所有图像和文本资源完成加载执行前
```
$(window).load(function(){...});
```

【讨论】：

在这种方法中，如何判断页面是否加载了几分钟但还没有完成？
这可以通过 setTimeout(function(){ !loaded && foo();},20000);并在文档就绪或窗口加载中将加载设置为 true
对于 jquery 3.0 使用 $(window).on("load", function (e) { });

【解决方案7】：

我认为最简单的方法是

var items = $('img, style, ...'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

编辑，有点疯狂：

var items = $('a, abbr, acronym, address, applet, area, audio, b, base, ' + 
    'basefont, bdo, bgsound, big, body, blockquote, br, button, canvas, ' + 
    'caption, center, cite, code, col, colgroup, comment, custom, dd, del, ' +
    'dfn, dir, div, dl, document, dt, em, embed, fieldset, font, form, frame, ' +
    'frameset, head, hn, hr, html, i, iframe, img, input, ins, isindex, kbd, ' +
    'label, legend, li, link, listing, map, marquee, media, menu, meta, ' +
    'nextid, nobr, noframes, noscript, object, ol, optgroup, option, p, ' +
    'param, plaintext, pre, q, rt, ruby, s, samp, script, select, small, ' + 
    'source, span, strike, strong, style, sub, sup, table, tbody, td, ' + 
    'textarea, tfoot, th, thead, title, tr, tt, u, ul, var, wbr, video, ' + 
    'window, xmp'), itemslen = items.length;

items.bind('load', function(){ 
    itemslen--;
    if (!itemlen) // Do stuff here
});

【讨论】：

我有点喜欢这个主意但是 itemslen 似乎从不倒数到 0。
注意这种方法 - 它假定所有列出的元素都有一个“加载”事件，而示例中的许多元素都没有。

【解决方案8】：

这叫做加载。 DOM 就绪实际上是出于 onload 等待图像的确切原因而创建的。（从Matchu 不久前关于类似问题的回答。）

window.onload = function () { alert("It's loaded!") }

onload 等待作为文档一部分的所有资源。

链接到他解释了一切的问题：

Click me, you know you want to!

【讨论】：

onload 的问题是，如果我在页面已经加载时执行window.onload = function(){...}，则不会发生任何事情。有没有办法解决这个问题？

【解决方案9】：

这是你的想法吗？

$("document").ready( function() {
    // do your stuff
}

【讨论】：

这将在 DOM 准备就绪时运行，但这可能是在图像等内容完成加载之前。

【解决方案10】：

一种选择是让页面为空白，包含少量的 javascript。使用脚本进行 AJAX 调用以获取实际页面内容，并让成功函数将结果写入当前文档。在超时功能中你可以“做一些其他令人惊奇的事情”

近似伪代码：

$(document).ready(function(){
    $.ajax
      url of actual page
      success:do something amazing
      timeout: do something else
});

【讨论】：

是的。但这是当我问自己“页面如何判断对它的请求是否超时？”时想到的第一个方法
它不会告诉你图像是否已完成加载。它只会说是否已加载原始标记
嗯。引出了一个有趣的问题。如果你只是做了 $(document).html(response)，并且 response 包含一个 document.ready 或一个 window.load，那么一旦文档被写入，它会执行吗？还是浏览器会看到页面已经加载，而不是在内容更改时调用它们？
我认为它会再次调用它，但不是 100% ......试试看