1

私はJQueryが初めてで、いくつかの基本的なイベントを試しています。

建設中のウェブサイトのページ（私のウェブサイト）でfadeInイベントを使用しました

私が使用しているコードは次のとおりで、現在の 3 つのセレクターにのみ適用されます。

$(document).ready(function(){

$('#logo').fadeIn(3000);
$('#heading').delay(2000).fadeIn(3000);
$('#tagline').delay(1000).fadeIn(3000);

});

私のボーイフレンドは、更新するたびに Chrome ブラウザで動作すると言っていますが、私のブラウザでは常に動作するとは限りません。画像が表示される場合と表示されない場合があります。完全に機能する場合もあれば、そうでない場合もあります。

これは私のインターネット接続でしょうか？それとも私のコードですか？

私はこれが初めてなので、どんな助けでも大歓迎です!! 前もって感謝します。

ジュリアナ

4

2 に答える 2

2

この回答はここに残しておきますが、より明白ではるかに簡単な非過剰な方法は、@ Kevin Bが上記のコメントで提案したもので$(window).load()あり、すべてのページコンテンツが読み込まれるのを待つのではなく、$(document).ready()待つだけです。ロードされるHTMLDOM。

おそらくやりたいことは、フェードインする前に画像がロードされていることを確認することです。ページのレンダリングが終了してJSを実行したときに画像がロードされていない場合、画像は表示されません。次に、ブラウザを更新すると、その時点で機能します。

これを試して：

$(document).ready(function(){

    $("#logo img").bind("load", function () { 
        if(!$("#logo").is(":visible")) {
             $('#logo').fadeIn(3000);
        }
    });

    $('#logo').fadeIn(3000);
    $('#heading').delay(2000).fadeIn(3000);
    $('#tagline').delay(1000).fadeIn(3000);

​});

あなたがしていることは、最初に、画像の読み込みが完了したらすぐに、画像がまだ表示されていない場合はフェードインすることです。しかし、問題は、画像が以前にダウンロードされている場合、これが勝ったことです。実際に発砲することはありません。したがって、常に実行される通常のfadein（）をその下に配置する必要があります。

これに関する主な問題は、画像が確実に読み込まれるまですべてのアニメーションを停止したい場合を除いて、タイミングがずれることです（おそらく1秒未満）。

これがいじくり回すフィドルです

于 2012-12-13T22:19:46.957 に答える
2

ほとんどの場合、画像の読み込みが完了していないか、場合によっては単に読み込まれていないため、フェードインが発生したときに画像が表示されていなかったため、画像がフェードインするのではなく、単に表示されます。これを回避するには、ウィンドウの読み込みイベントを使用して最初に読み込まれるようにします。

$(window).load(function(){
  // do stuff
});
于 2012-12-13T22:47:13.047 に答える