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

ローダーは、display:none を持つ HTML ブロックにあります。なので表示されません。（外に置いても）

代わりに、HTML の代わりに、display:none を使用してコンテナー DIV を作成し、それを非表示にしてフェードインします。

<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 に答える