检测页面是否完成加载

有没有一种方法来检测一个页面已经完成加载,即所有的内容,JavaScript和资产,如CSS和图像?

如此:

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

另外如果页面已经加载超过1分钟,然后做一些其他的事情,如:

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

我已经看到像苹果的MobileMe这样的网站做类似的检查,但还没有能够在他们庞大的代码库中find它。

谁能帮忙?

谢谢

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

 // 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); }); 
 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的详细解释和两个事件DOMContentLoadedOnLoad可以在这个页面上find。

DOMContentLoaded :当DOM准备好被操纵。 jQuery捕获这个事件的方法是使用jQuery(document).ready(function () {});

OnLoad :当DOM准备就绪时,所有资源 (包括图像,iframe,字体等 )已经加载完毕,并且旋转轮/小时类消失。 jQuery捕获这个事件的方法就是上面提到的jQuery(window).load

有两种方法可以在jQuery中执行此操作,具体取决于您要查找的内容。

使用jQuery你可以做到

  • / /这将等待文本资产被调用之前加载(dom .. css .. js)

     $(document).ready(function(){...}); 
  • / /这将等待所有的图像和文本资产完成加载之前执行

     $(window).load(function(){...}); 

这就是所谓的onload。 DOM准备实际上是为了onload在图像上等待的确切原因而创build的。 (前一段时间,来自Matchu的一个类似问题的答案。)

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

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

链接到他解释的一切问题:

点击我,你知道你想要!

我认为最简单的方法是

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

另外一个选项你可以检查document.readyState就好,

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

从readyState页面的文档中,完成状态的摘要是

在文档加载时返回“加载”,一旦完成parsing,但仍然加载子资源,则为“交互式”,一旦加载,则“完成”。

一种select是使页面空白,包含less量的JavaScript。 使用脚本进行AJAX调用以获取实际的页面内容,并使成功函数将结果写入当前文档。 在超时function,你可以“做一些令人惊叹的事情”

近似伪代码:

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

没有jquery或类似的东西,为什么不呢?

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

这是你想到的吗?

 $("document").ready( function() { // do your stuff } 
 var pageLoaded=0; $(document).ready(function(){ pageLoaded=1; }); 

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

在评论中提问的人员仅供参考,这正是我在项目中实际使用的情况:

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