用spinner加载页面后逐页淡入淡出

Question

用spinner加载页面后逐页淡入淡出

我试图在加载后淡入整个页面,

我的代码:

<script type="text/javascript">
    $(window).bind("load", function() {
        $('#overlay').fadeOut(function() {
            $('html').fadeIn();
        });
    });
</script>


<html style="display:none">
....
<body>
.....
</body>
</html>
<div id="overlay">
     <img src="ajax-loader.gif" alt="Loading" />
     Loading...
</div>

Run Code Online (Sandbox Code Playgroud)

问题是加载图像没有显示

我该怎么办？

Answer 1

Ren*_*Pot 7

加载器位于HTML块中,其显示为:none.所以它不会显示.(即使你把它放在外面)

相反,创建一个带有display:none的容器DIV,将其隐藏并淡入,而不是HTML.

<html>
<head>

<script type="text/javascript">
    $(window).bind("load", function() {
        $('#overlay').fadeOut(function() {
            $('#container').fadeIn();
        });
    });
</script>
</head>
<body>

    <div id="overlay">
         <img src="ajax-loader.gif" alt="Loading" />
         Loading...
    </div>
    <div id="container" style="display:none">

    </div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	13 年，2 月前
查看次数：	3024 次
最近记录：	13 年，2 月前