0

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

编辑：谢谢大家的回答，我已经成功了！这是最终产品：http: //invisiblelabs.net/wf/

谢谢！

4

2 回答 2

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

于 2013-08-21T08:54:09.133 回答
0

快速/坏的方法：

$(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');
});
于 2013-08-21T08:59:04.937 回答