我怎么知道什么时候已经HTML完全呈现

问题描述：

案例1：我怎么知道什么时候已经HTML完全呈现

我打开一个非常大的HTML页面，其中包括了很多复杂的布局和字体。该页面将需要一些未知时间来呈现。

案例2：

使用jQuery的.html（）函数，使我的DOM显著的变化。修改后的DOM将需要一些未知时间来渲染。

在这两种情况下，我希望能够用微调器覆盖整个屏幕，直到页面有完全完成渲染。

在寻找这个问题的答案时，我发现了类似的问题，但答案并不相关。要清楚：

我不想知道什么时候DOM准备就绪。

我不想知道HTTP数据何时被提取。

我想知道什么时候DOM中的所有内容都已完全绘制到屏幕的。

设置一些最坏情况超时不是一个可接受的解决方案。

我需要基于WebKit的浏览器的解决方案。

前者很简单：使用'onload'。后者我不知道是否有可能，有兴趣看看会发生什么。 – 2010-12-21 00:15:18

从可用性的角度来看，使用微调器覆盖整个屏幕是IMO最可能做的最糟糕的事情。它只会使长负载看起来更长。只是我2¥。：o） – deceze 2010-12-21 00:16:26

难道你不能只是添加一个微调到基本的HTML和隐藏所有的JavaScript完成后微调？ http://www.howtocreate.co.uk/safaribenchmarks.html – 2010-12-21 00:38:03

答

刚刚送走我的头顶，你可以这样做：

var img_loaded; 
$(lastImg).load(function() { img_loaded = true; }); 

(function checkLoading() { 
    return $(lastElement).css("lastProperty") === "value" && img_loaded ? stopLoading() : setTimeout(checkLoading, 50); 
}());

当然，有很多不对的：

它假定一个Image.onload事件按照它通常的方式工作（图像被完全下载，以及所有东西）。如果Safari在Windows.onload上“作弊”，我们可以用图像信任它们吗？
它假设CSS文件中的最后一条规则将最后执行（并完成）。我猜如果最后一个规则是字体权重或者什么东西，并且倒数第二个规则是加载一个MB背景图像，那也行不通。
它需要不断的关注。不同的部分必须针对不同的页面进行更新。因为它没有规模。

您链接到的文章只谈到了Safari 3.我们能不能相信Safari的后续版本会加载两个版本？

答

对于情况下，一个我认为你可以使用：

<BODY onLoad="alert('Page Fully Loaded')">

答

像这样的东西应该有希望的工作：

... 
<head> 
    ... 
    <style type="text/css"> 
    #overlay { 
     background:url(../images/loading.gif) no-repeat 50% 50%; 
     display:none; 
    } 
    .loading #overlay { 
     display:block; 
     left:0; 
     height:100%; 
     position:absolute; 
     top:0; 
     width:100%; 
    } 
    .loading > #overlay { 
     position:fixed; 
    } 
    </style> 
    <script> 
    if (document.documentElement) { 
     document.documentElement.className = 'loading'; 
    } 
    </script> 
</head> 
<body> 
    .. 
    <div id="overlay"> 
    .. 
    </div> 
    <script> 
    $(document).ready(function() { 
     $('.loading #overlay').fadeOut(500, 
     function() { 
      $(document.documentElement).removeClass('loading'); 
      $('#overlay').remove(); 
     }); 
    }); 
</body> 
</html>

答

只是一个小点;大多数浏览器在处理javascript时不会为微调器制作动画。特别是表现出非常单线程的IE。

它使用不同的，非动画，设计了“微调”的价值。像沙漏一样。

思想为你当是它呈现的挑战：为什么不把你的东西初始化代码，你在你的$调用（文件）。就绪事件之后。在IE的情况下，它应该最后触发。

可以通过体验来证实这一点 - 您会发现一个漂亮的微调框，然后在大部分时间页面加载之前就冻结。 – CodeVirtuoso 2011-01-04 17:05:38

我怎么知道什么时候已经HTML完全呈现

相关推荐