3

我有一个由另一家公司提供的 Web 应用程序，可通过 CSS 获得半有限的自定义，并<head>在<body>.

我需要比 CSS 单独提供更多的自定义，因此（就在之前</body>）我注入 jQuery 和一个<script>标签来处理它们提供的 HTML 中的废话。（添加、重新设置和删除页面上的各种 HTML 元素和内容。）

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

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

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

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

4

3 回答 3

2

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

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

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

于 2012-08-16T16:20:01.353 回答
1

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

类似的东西？

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

于 2012-08-16T16:17:26.183 回答
1

我的最终解决方案是：

  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. 在所有 DOM 操作之后，在最后删除loading该类：

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

这种方法的好处是用户在加载过程中不会看到空白屏幕；没有被删除或移动的内容（一些 CSS 标题）是可见的，并且在某些情况下可能会随着其他内容的出现而略有变化。

于 2012-08-16T21:21:18.830 回答