Question

我有一个由another company提供的Web应用程序，通过CSS提供半限制自定义，并在<head>的末尾以及{{1的开头和结尾处包含HTML内容}}

我需要比单独提供的CSS更多的自定义，所以（在<body>之前）我注入jQuery和</body>标签来按摩他们提供的HTML中的垃圾。（在页面上添加，重新显示和删除各种HTML元素和内容。）

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

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

如何在网页加载时避免看到预先存在的内容？

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

Answer 1

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

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

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

Answer 2

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

那样的东西？

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

Answer 3

我的最终解决方案是：

在<body>：

开始后立即添加此代码

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

使用CSS隐藏将要移动或移除的任何部分：

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

在所有DOM操作之后删除最后的loading类：

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

这种方法的好处是用户在加载过程中看不到空白屏幕;没有删除或移动的内容（某些CSS标题）是可见的，并且在某些情况下可能会略微移动，因为附加内容会显示在它们周围。

延迟网页的初始呈现

3 个答案: