7

情况1：

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

案例2：

我使用 jquery .html() 函数对我的 DOM 进行重大更改。修改后的 DOM 将花费一些未知的时间来呈现。

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

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

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

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

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

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

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

4

4 回答 4

2

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

值得为“微调器”使用不同的非动画设计。沙漏之类的东西。

想想你什么时候提出的挑战：为什么不在你在 $(document).ready 事件中调用的初始化代码之后放置一些东西。对于 IE，它应该最后触发。

于 2010-12-29T14:35:21.360 回答
1

这样的事情应该会起作用：

...
<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>
于 2010-12-21T09:28:12.903 回答
0

就在我的脑海中，你可以做这样的事情：

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

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

当然，这样做有很多问题：

  1. 它假定 Image.onload 事件以正常方式工作（图像已完全下载以及所有内容）。如果 Safari 在 window.onload 上“作弊”，我们可以信任他们的图像吗？
  2. 它假定 CSS 文件中的最后一条规则将最后执行（并因此完成）。我猜如果最后一条规则是字体粗细或其他东西，并且倒数第二条规则正在加载 MB 背景图像，那也不起作用。
  3. 它需要不断的关注。必须为不同的页面更新不同的部分。照原样，它不会扩展。

您链接到的文章只讨论了 Safari 3。我们以后还能不相信 Safari 的 onload 两个版本吗？

于 2010-12-21T02:30:11.367 回答
0

对于第一种情况，我认为您可以使用：

<BODY onLoad="alert('Page Fully Loaded')">
于 2010-12-21T07:58:31.927 回答