Bea*_*red 74 javascript css web
我讨厌你如何实际看到网页加载.我认为等待页面完全加载并准备好显示(包括所有脚本和图像)然后让浏览器显示它会更有吸引力.所以我有两个问题......
提前感谢您的智慧!
Gra*_*ner 30
对于给出的所有原因,这是一个非常糟糕的主意,甚至更多.也就是说,这是你如何使用jQuery做到的:
<body>
<div id="msg" style="font-size:largest;">
<!-- you can set whatever style you want on this -->
Loading, please wait...
</div>
<div id="body" style="display:none;">
<!-- everything else -->
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#body').show();
$('#msg').hide();
});
</script>
</body>
如果用户禁用了JavaScript,则他们永远不会看到该页面.如果页面永远不会完成加载,他们永远不会看到页面.如果页面加载时间太长,他们可能会假设出现问题而只是去其他地方而不是*请等待......*ing.
Rob*_*ner 20
我认为这是一个非常糟糕的主意.用户喜欢看到进步,简单明了.将页面保持在一个状态几秒钟,然后立即显示加载的页面将使用户感觉没有任何事情发生,您可能会失去访问.
一个选项是在后台处理内容时显示页面上的加载状态,但这通常是在网站实际处理用户输入时保留的.
http://www.webdeveloper.com/forum/showthread.php?t=180958
最重要的是,你至少需要在页面加载时显示一些视觉活动,而且我认为一次加载一小部分页面并不是那么糟糕(假设你没有做一些严重减慢页面的事情)加载时间).
Kei*_*ler 10
肯定有一个有效的用途.一种是阻止人们点击链接/导致JavaScript事件发生,直到加载了所有页面元素和JavaScript.
在IE中,您可以使用页面转换,这意味着页面在完全加载之前不会显示:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=.01)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=.01)" />
注意持续时间短.这足以确保页面在完全加载之前不会显示.
在FireFox和其他浏览器中,我使用的解决方案是创建一个页面大小和白色的DIV,然后在页面的最末端放入隐藏它的JavaScript.另一种方法是使用jQuery并隐藏它.不像IE解决方案那样轻松,但两者都运行良好.
Tre*_*ham 10
这是使用jQuery的解决方案:
<script type="text/javascript">
$('#container').css('opacity', 0);
$(window).load(function() {
$('#container').css('opacity', 1);
});
</script>
我把这个脚本放在我的</body>标签之后.只需将"#container"替换为要隐藏的DOM元素的选择器即可.我尝试了几种变体(包括.hide()/ .show()和.fadeOut()/ .fadeIn()),只是设置不透明度似乎有最少的不良影响(闪烁,改变页面高度等).您也可以替换css('opacity', 0)用fadeTo(100, 1)一个平滑的过渡.(不,fadeIn()不会起作用,至少不是在jQuery 1.3.2下.)
现在注意事项:我实现了上面的原因,因为我正在使用TypeKit,当你刷新页面并且字体需要几百毫秒才能加载时会出现恼人的闪烁.因此,在TypeKit加载之前,我不希望任何文本出现在屏幕上.但是,如果您使用上面的代码并且页面上的某些内容无法加载,那么显然您遇到了大麻烦.有两种明显的方法可以改进:
我不打算在这里实施加载指示器,但时间限制很容易.只需将其添加到上面的脚本:
$(document).ready(function() {
setTimeout('$("#container").css("opacity", 1)', 1000);
});
所以现在,在最糟糕的情况下,您的页面将需要额外的秒才能显示.
小智 5
紧跟在您的 <body> 标签之后添加如下内容...
<style> body {opacity:0;}</style>
对于 <head> 中的第一件事，添加类似...
<script>
window.onload = function() {setTimeout(function(){document.body.style.opacity="100";},500);};
</script>
至于这是好的做法还是不好的做法取决于您的访客以及等待所需的时间。
仍然悬而未决且我在这里没有看到任何答案的问题是如何确保页面已经稳定。例如，如果您正在加载字体，页面可能会回流一点，直到所有字体都加载并显示出来。我想知道是否有一个事件告诉我页面已完成渲染。
| 归档时间： |
|
| 查看次数： |
168400 次 |
| 最近记录： |