Question

案例1：

我加载了一个非常大的HTML页面，其中包含许多复杂的布局和字体。该页面将需要一些未知的时间来渲染。

案例2：

我使用jquery .html（）函数对我的DOM进行重大更改。修改后的DOM将需要一些未知的时间来渲染。

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

在搜索此问题的答案时，我发现了类似的问题，但答案并不相关。要明确：

我不想知道DOM何时准备就绪。

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

我想知道DOM中的所有内容何时完全绘制到屏幕上。

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

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

Answer 1

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

值得为'微调器'使用不同的非动画设计。像沙漏一样。

考虑到它何时提出挑战：为什么不在你在$（document）.ready事件中调用的初始化代码之后添加一些东西。在IE的情况下，它应该终止。

Answer 2

这样的事情应该有用：

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

Answer 3

在我的头顶，你可以这样做：

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在window.onload上“作弊”，我们可以信任他们的图片吗？
它假定CSS文件中的最后一个规则将在最后执行（并完成）。我猜想如果最后一条规则是字体权重或其他规则，而倒数第二条规则正在加载MB背景图像，那么它也无法正常工作。
需要经常关注。必须针对不同页面更新不同的部分。按原样，它不会缩放。

您链接的文章只讨论了Safari 3.我们以后仍然不能相信Safari的两个版本吗？

Answer 4

对于案例一，我认为你可以使用：

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

我如何知道HTML何时完全呈现

4 个答案: