1

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

我的代码：

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

问题是加载图像不显示

我该怎么办？

4

1 回答 1

8

加载器位于 HTML 块中，该块具有 display: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>
于 2012-12-03T16:38:35.200 回答