延迟网页的初始呈现

Delaying the initial rendering of a web page

本文关键字：网页 延迟      更新时间：2023-09-26

我有一个由另一家公司提供的Web应用程序，可通过CSS进行半有限的自定义，并在<head>末尾和<body>的开头和结尾包含HTML内容。

我需要比 CSS 本身提供的更多的自定义，所以（就在 </body> 之前）我注入了 jQuery 和一个 <script> 标签来从它们提供的 HTML 中剔除废话。（添加、重定父级和删除页面上的各种 HTML 元素和内容。

不幸的是，这种方法意味着有时用户可以看到原始（CSS样式的）页面内容在页面重组自身时闪烁之前短暂出现。

在进行这些更改之前，我不是在等待load或document.ready事件，而是在添加所有元素的那一刻直接操作 DOM。

如何避免在页面加载时看到预先修改的内容？

我目前的计划是添加隐藏任何注定要移动的内容的 CSS，使用 JS 在加载后立即在<body>上设置一个类以启用此 CSS 规则，然后在 DOM 修改完成后删除类/CSS 规则。但是，我不确定这是否是黑客攻击;有没有更清洁的解决方案？

在身体顶部添加这样的东西？

<div style="z-index:10000; background-color:#FFF; position:fixed; top:0; left:0; width:100%; height:100%;"></div>

然后在其他JS运行或DOM准备就绪时隐藏/删除此div

http://gayadesign.com/scripts/queryLoader2/

类似的东西？

只是为了澄清我没有写那个剧本。

我的最终解决方案是：

  1. 在<body>开始后立即添加此代码：

    <script type="text/javascript">
  document.body.className += ' loading';
</script>

  2. 使用 CSS 隐藏要移动或删除的任何片段：

    body.loading #navigation,
body.loading ol.extra-links {
  display:none !important
}

  3. 在最后删除loading类，毕竟 DOM 操作：

      <!-- include jQuery for transformation work -->
  <script type="text/javascript">
    // all transformations
    $(document.body).removeClass('loading');
  </script>
</body>

这种方法的好处是用户在加载过程中不会看到空白的白屏;未被删除或移动的内容（某些 CSS 标头）是可见的，并且在某些情况下可能会随着周围显示其他内容而略有偏移。

相关文章：