fil*_*lle 22 javascript jquery
我想在我的页面加载之前运行一些jquery代码.我添加了一些使用javascript更改css的类,当页面加载时,我会在短时间内看到"旧"css.有任何想法吗？谢谢
T.J*_*der 35
我想在我的页面加载之前运行一些jquery代码.
这很容易做到; 这很有趣,因为很多时候,人们都试图以相反的方式去做.
当浏览器遇到script标记时,禁止使用一些特殊属性(以及支持它们的浏览器),页面的所有处理都会暂停,浏览器会将脚本交给JavaScript引擎.仅在脚本完成时才继续处理页面.
因此,如果页面部分中有script标记,则head可以通过以下document.write函数输出CSS类:
<DOCTYPE html>
<html>
<head><title>Foo</title>
<script src='jquery.js'></script>
<script>
if (some_condition) {
document.write("<style>foo { color: blue; }</style>");
}
else {
document.write("<style>foo { color: red; }</style>");
}
</script>
请注意,some_condition在上面只能依赖并引用文档中它上面的项目(因为浏览器还没有对文档的其余部分做任何事情,因为它正在等待document.write脚本将要访问的内容输出).
实例(刷新几次,一半是红色,一半是蓝色).它不使用jQuery,但你明白了.
假设您已在主体上使用onLoad事件或使用jQuery ready回调,则可以从style ="display:none;"开始.在你的根div上,做你的JS东西,最后在你准备公开内容时在那个div上设置"display:block".瞧？
基本上，这与实现装载程序/旋转程序类似。您向用户显示动画的gif，然后在页面完成加载时将其删除。
在这种情况下，我们不显示gif，而是显示空白。
有多种方法可以实现此结果。在便利性和性能方面，这里的订购很少。
全局CSS规则。
隐藏body您的全局CSS文件。
body { display:none; }
文档加载完成后，切换显示：
// Use 'load' instead of 'ready' cause the former will execute after DOM, CSS, JS, Images are done loading
$(window).load(function(){
$(body).show();
});
带有div层的封面使用div
隐藏在页面顶部的内容，然后将其删除。
div#page_loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
z-index: 100;
}
JavaScript代码段在页面呈现之前
隐藏body：
<body onload="document.body.style.display='none';">
如果使用Modernizr，则还可以利用其CSS类来隐藏/显示内容，具体取决于用户的设备或浏览器。
但是我不建议这样做，因为它jQuery在页面顶部运行脚本，这会增加额外的负担，甚至延迟进一步的页面渲染。