aro*_*men 3 javascript jquery dom
我有一个javascript加载到文档头,需要隐藏文档正文,直到所有页面内容都已加载.我试过了:
$(document.body).hide();
但在某些浏览器中似乎仍有闪烁现象.我正在使用最新的jQuery库(1.6.2).在domready上触发事件会隐藏文档正文,但也会导致闪烁.
我能控制的就是javascript中的内容.我不能操纵静态html页面,因为脚本是作为插件开发的.
在加载页面之前隐藏内容是一种反可用性功能.内容的某些部分可能需要一段时间才能加载,同时您的访问者什么都看不到.浏览器会在收到内容时呈现内容,因为用户在最开始时选择了内容作为首选模型.
如果您坚持使用此方法,则必须使用脚本隐藏内容.否则,禁用或无法使用javascript或脚本无法正确执行的用户将永远不会看到内容.
使用脚本隐藏内容的最简单方法是使用document.write创建样式表,然后将其删除以显示内容:
document.write( '<style class="hideStuff" ' +
'type="text/css">body {display:none;}<\/style>');
window.onload = function() {
setTimeout(
function(){
var s, styles = document.getElementsByTagName('style');
var i = styles.length;
while (i--) {
s = styles[i];
if (s.className == 'hideStuff') {
s.parentNode.removeChild(s);
return;
}
}
}, 1000); // debug pause
}
执行此操作的最佳方法是将所有内容放在容器div中,并使用默认情况下隐藏它的样式表.然后,您可以在加载所有内容后显示内容.在默认页面内容呈现之前无法运行Javascript,因此开始隐藏的唯一方法是使用静态定义的CSS规则:
HTML:
<body>
<div id="container">
all dynamic page content goes here
</div>
</body>
带有页面的样式表中的CSS,使其最初不可见:
#container {display: none;}
然后,你可以用javascript做任何你想做的事情,当你完成构建页面时,你这样做是为了让它可见:
document.getElementById("container").style.display = "block";
或者在jQuery中:
$("#container").show();
| 归档时间： |
|
| 查看次数： |
36635 次 |
| 最近记录： |