延迟网页的初始渲染

问题描述：

我有一个由another company提供的网络应用程序，可通过CSS获得半限制的自定义，并且在<head>的末尾和<body>的开始和结尾包含HTML内容。延迟网页的初始渲染

我需要比单独提供的CSS更多的自定义功能，因此（在</body>之前）我注入了jQuery和一个<script>标记，以便将它们提供的HTML中的垃圾按摩出来。（添加，重新设置和删除页面上的各种HTML元素和内容）

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

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

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

^{我目前的计划是添加CSS隐藏的是注定要被移动的任何内容，使用JS在加载启用该CSS规则要尽快设置在<body>一类，然后删除类/ DOM规则完成后的CSS规则。然而，我不确定这是否是黑客行为。有没有更清洁的解决方案？}

你有权访问文档的头部吗？ – j08691 2012-08-16 16:17:03

如何在当前文档中添加一个具有绝对位置的div，将隐藏body标签内的所有内容，并在完成html元素排除之后删除该div – 2012-08-16 16:20:58

@ j08691是：_“包含HTML ...在末尾

“_ – Phrogz 2012-08-16 16:32:00

答

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

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

，然后隐藏/删除该div时其他JS已经运行或当DOM准备

答

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

类似的东西？

只是为了阐明我没有写的脚本。

答

我最后的解决办法是：

开始之后添加以下代码<body>：

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

使用CSS来隐藏打算牛逼任何片Ø被移动或删除：

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

在最后取出loading类，所有DOM操作后：

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

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

延迟网页的初始渲染

相关推荐