Question

我试图在加载后整个页面淡出，

我的代码：

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

问题是加载图片没有显示

我该怎么办？

Answer 1

加载程序位于HTML块中，其显示为：none。所以它不会显示。（即使你把它放在外面）

相反，使用display：none创建一个容器DIV，隐藏＆amp;淡入它，而不是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>

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

1 个答案: