Question

有没有办法检测页面何时完成加载，即所有内容，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);
});

Answer 1

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/

另请参阅http://api.jquery.com/load-event/以获取有关jQuery（窗口）.load。

的说明

<强>更新

可以在this page找到有关javascript加载如何工作以及两个事件 DOMContentLoaded 和 OnLoad 的详细说明。

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

OnLoad ：当 DOM准备就绪且所有资产 - 包括图片，iframe，字体等 - 已加载并且纺车/小时班消失。 jQuery捕获此事件的方法是上面提到的jQuery(window).load。

Answer 2

根据您的要求，有两种方法可以在jquery中执行此操作..

使用jquery你可以做

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

Answer 3

这叫做onload。 DOM ready实际上是出于onload等待图像的确切原因而创建的。（前一段关于同一问题的Matchu答案。）

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

onload等待文档中的所有资源。

链接到他解释所有问题的问题：

Click me, you know you want to!

Answer 4

我认为最简单的方法是

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
});

Answer 5

您可以检查document.readyState的另一个选项，

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

从readyState页面的文档中，完整状态的摘要是

返回＆＃34; loading＆＃34;当文档正在加载时，＆＃34;交互式＆＃34;一旦它完成解析但仍然加载子资源，并且＃34;完成＆＃34; 一旦装好了。

Answer 6

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

近似伪代码：

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

Answer 7

var pageLoaded=0;

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

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

Answer 8

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

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

Answer 9

这是你的想法吗？

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

Answer 10

在评论中提到的人的FYI，这是我在项目中实际使用的内容：

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');
});

检测页面是否已完成加载

10 个答案: