0

私のサイトでhttp://boxcomp.111mb.de/luxus/html9

jqueryを使用して、ロードされるまでコンテンツを非表示にし、ロードされたときにフェードインします。このようにして、よりきれいで滑らかに見えます。AJAXでコンテンツをロードしています。問題は、適切に機能しないことです。接続が遅い場合、コンテンツは読み込まれる前に表示されます。そんなはずはない。これが私が使用しているコードです：

<script>
$(document).ready(function() {
    $('#home').click(function() {
        $('#content-shown , #pics').animate({opacity: 0}, 250, function() {
            $('.content-loading').fadeIn(250, function() {
                $('#navigation_all , #content-shown').css("height", "1500px");
                $('#pics').load('content.html #home-bild').animate({opacity: 1}, 250);
                $('#content-shown').load('content.html #home', function() {
                    $('.content-loading').fadeOut(250, function() {
                        $('#content-shown').animate({opacity: 1}, 250);
                    });
                });
            });
        });
    });
});​
</script>

オブジェクトをクリックすると、実際のコンテンツがフェードアウトし、コンテンツの読み込み中に「しばらくお待ちください」というテキスト (.loading) がフェードインします (ただし、表示されません)。その後、コンテンツが読み込まれると、.loading がフェードアウトし、コンテンツがフェードアウトします。ただし、すべてが完全に読み込まれる前に表示されることがあります。

ロードされたときにフェードインするようにするにはどうすればよいですか??

ありがとう！

4

1 に答える 1

0

私が見る唯一のことは、この行にあります：

$('#pics').load('content.html #home-bild').animate({opacity:1},250);

animate関数をチェーンするだけでなく、ロードのコールバック関数に移動する必要がある場合があります。例：

$('#pics').load('content.html #home-bild', function(){
  $('#pics').animate({opacity:1},250)
});

またはopacity:'show'代わりに使用します：

 $('#pics').load('content.html #home-bild', function(){
      $('#pics').animate({opacity:'show'},250)
    });
于 2013-01-02T19:07:10.623 に答える