显示一个div onload，延伸1秒，然后淡出相同的div并在内容div中淡出
显示一个div onload，延伸1秒，然后淡出相同的div并在内容div中淡出
提问于 2013-08-21 16:48:37
如何在页面加载时显示正在加载的gif，使其多显示1秒，然后在页面加载后，1秒过去了，相同的加载gif将淡出，主要的#内容将淡入？
编辑:感谢所有人的回答，我让它工作了！这是最终的产品：http://invisiblelabs.net/wf/
谢谢!
回答 2
Stack Overflow用户
发布于 2013-08-21 16:54:09
Html：
<body>
<div id="divload">
<img src="loading.gif" />
</div>
<div id="divcontent" style="visible: none">
...
</div>
</body>脚本：
$(function() {
$('#divload').delay(1000).fadeOut();
$('#divcontent').delay(1000).fadeIn();
});首先，你的gif是可见的，而内容是不可见的。在页面加载和额外的1秒延迟后，gif将淡出，内容将淡入。
Stack Overflow用户
发布于 2013-08-21 16:59:05
最快/最坏的方法是：
$(window).load(function(){
setTimeout(function(){
$('#content').fadeIn();
$('#loading-image').fadeOut();
},1000);
});在现代浏览器中，有一种更好的方法，它使用JavaScript进行状态切换，并使用CSS来制作实际的动画。
更好的方式(css，第1部分)：
#content{ opacity:0 }
#loading-image{ opacity:1; }
#content, #loading-image
{
-webkit-animation:opacity 1s 1s;
/* Note... example only specifies Webkit. You should do the same for -moz, -ms, etc*/
}
body.loaded #loading-image { opacity:0;}
body.loaded #content {opacity:1}更好的方法(js，第2部分)：
$(window).load(function(){
$('body').addClass('loaded');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18352859
复制相关文章
相似问题
腾讯云开发者
