Javascript 显示一个div onload，延长1秒，然后淡出同一个div并淡入content div_Javascript_Jquery_Html_Css_Onload

Javascript 显示一个div onload，延长1秒，然后淡出同一个div并淡入content div

javascript jquery html css

Javascript 显示一个div onload，延长1秒，然后淡出同一个div并淡入content div,javascript,jquery,html,css,onload,Javascript,Jquery,Html,Css,Onload,如何在页面加载时显示正在加载的gif，使其再显示1秒，然后在页面加载并超过1秒后，相同的加载gif将淡出，主内容将淡入编辑：谢谢大家的回答，我成功了！以下是最终产品：谢谢 Html： <body> <div id="divload"> <img src="loading.gif" /> </div> <div id="divcontent" style="visible: none">

如何在页面加载时显示正在加载的gif，使其再显示1秒，然后在页面加载并超过1秒后，相同的加载gif将淡出，主内容将淡入

编辑：谢谢大家的回答，我成功了！以下是最终产品：

谢谢

Html：

<body>
    <div id="divload">
        <img src="loading.gif" />
    </div>
    <div id="divcontent" style="visible: none">
       ...
    </div>
</body>

首先，您的gif将可见，而内容将不可见。加载页面并再延迟1秒后，gif将淡出，内容将淡入。

快速/不好的方法：

$(window).load(function(){
    setTimeout(function(){
        $('#content').fadeIn();
        $('#loading-image').fadeOut();
    },1000);
});

在现代浏览器中，有一种更好的方法，使用JavaScript进行状态切换，同时使用CSS进行实际动画

更好的方式（css，第1部分）：

更好的方法（js，第2部分）：

访问页面时如何淡入#加载？（满载时不适用）

$(window).load(function(){
    setTimeout(function(){
        $('#content').fadeIn();
        $('#loading-image').fadeOut();
    },1000);
});

#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}

$(window).load(function(){
    $('body').addClass('loaded');
});