当前位置： 文江博客话题详情

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

发布于 2024-10-08 05:41:02 字数 468 浏览 2 评论 0原文

情况 1：

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

情况 2：

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

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

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

我不想知道 DOM 何时准备好。

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

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

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

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

原文

case 1:

I load a very large HTML page that includes a lot of complex layout and fonts.
The page will take some unknown time to render.

case 2:

I use jquery .html() function to make significant changes to my DOM.
The modified DOM will take some unknown time to render.

In both cases, I want to be able to cover the whole screen with a spinner until the page has completely finished rendering.

In searching for answers to this question, I have found similar questions asked but the answers are not relevant. To be clear:

I don't want to know when the DOM is ready.

I don't want to know when the HTTP data has been fetched.

I want to know when everything in the DOM has been completely drawn to the screen.

Setting some worst-case timeout is not an acceptable solution.

I need a solution for WebKit based browsers.

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（5）

∞觅青森が 2024-10-15 05:41:02

只是一个小点；大多数浏览器在处理 JavaScript 时不会为旋转器设置动画。特别是 IE，其行为非常单线程。

值得为“旋转器”使用不同的非动画设计。像沙漏一样的东西。

考虑一下您何时呈现挑战：为什么不在 $(document).ready 事件中调用的初始化代码之后放置一些内容。对于 IE，它应该最后触发。

Just a small point; most browsers won't animate a spinner whilst they're processing the javascript. Particularly the IEs which behave very single-threaded.

It's worth using a different, non-animated, design for the 'spinner'. Something like an hourglass.

Thought for your when's it rendered challenge: why not put something after your initialisation code which you call in your $(document).ready event. In the case of IEs, it should fire last.

回复 原文
情徒 2024-10-15 05:41:02

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

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

Something like this should hopefully work:

...
<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>
回复 原文
甜妞爱困 2024-10-15 05:41:02

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

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 吗？

Just off the top of my head, you could do something like this:

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

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

Of course, there's a lot wrong with this:

  1. It assumes that an Image.onload event works the way it normally does (the image is completely downloaded and everything). If Safari "cheats" on the window.onload, can we trust them with images?
  2. It assumes that the last rule in the CSS file will be carried out (and so completed) last. I would guess that if the last rule is a font-weight or something, and the second-to-last rule is loading a MB background-image, that won't work either.
  3. It requires constant attention. Different parts have to be updated for different pages. As is, it doesn't scale.

The article you linked to only talked about Safari 3. Can we still not trust Safari's onload two versions later?

回复 原文
执笔绘流年 2024-10-15 05:41:02

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

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

For case one I think you can use:

<BODY onLoad="alert('Page Fully Loaded')">
回复 原文
空城旧梦 2024-10-15 05:41:02

为复杂的 HTML 元素设置监听器（可能需要一些未知的时间来渲染），当每个元素加载完毕后，将其标记为完成并对其进行计数，当事件的计数等于元素总数时，我们可以确认该页面已经完全完成渲染。

Set listeners to the complex HTML elements (that may take some unknown time to render), when each of them has loaded, mark it as done and count it, when the event's count equals to the total of elements, we can confirm that the page has completely finished rendering.

回复 原文
~没有更多了~

关于作者

谁人与我共长歌

暂无简介

0 文章
0 评论
23 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

linfzu01

文章 0 评论 0

§对你不离不弃

文章 0 评论 0

可遇━不可求

文章 0 评论 0

枕梦

文章 0 评论 0

qq_3LFa8Q

文章 0 评论 0

JP

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文