Question

如何在页面加载时显示加载gif，再显示1秒钟，然后在页面加载并且1秒钟过后，相同的加载gif将淡出，主要#content将淡出？

编辑：谢谢大家回答，我搞定了！以下是最终产品：http://invisiblelabs.net/wf/

谢谢！

Answer 1

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将淡出，内容将淡入。

Answer 2

快速/坏的方法：

$(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');
});

显示div onload，延长1秒，然后淡出相同的div并淡入内容div

2 个答案: