1

私はこのサイトをhttp://bit.ly/JV5I0Zと

フェードイン効果があり、2番目の画像（newBg）が最初の画像（bgImg）の上に立ってフェードインし、次にsrcを2番目から1番目にコピーして、両方が同じ画像になるようにします。 2番目の不透明度を0に設定し、ユーザーが画像を変更するたびに繰り返します。

これはOperaとChromeで正常に機能しますが、Firefoxではフェードインが遅すぎるようで、フェードアウトimg（私が言ったように実際にはフェードアウトせず、上書きされるだけです）がアニメーションの最後でフリックし、表示されてから消えます。

何がこれを引き起こしているのか、Firefoxのフェードインが遅い原因は何なのかわかりません。

フェードインを処理するコードは次のとおりです。http：//jsfiddle.net/VbjPc/1/

どんな助けでも大歓迎です。

編集 - - - - - -

画像のプリロードに使用するコードでjsfiddlehttp : //jsfiddle.net/VbjPc/1/を更新しました。新しいコードは下部にあります。プリロードは機能していると思います。画像が読み込まれるまで何も起こらず、画像が500kb程度であることがわかるので、画像が読み込まれるまでに数秒かかります。

4

1 に答える 1

3

画像が Web ブラウザーに初めて読み込まれるとき、ブラウザーが画像をダウンロードするときに、ある程度の待ち時間が発生します。

一般に、ほとんどの Web サイトには多くの可動部分があります。HTML ドキュメントがブラウザーによってダウンロードされると、ブラウザーは、HTML ドキュメント内の HTML 要素によって表されるすべての要素とイベントの処理を開始します。

たとえば、リンク タグが検出されると、CSS の読み込みが開始されます。スクリプト要素の JavaScript を読み込んでいます。その他の HTML 要素が DOM に追加されます。これが発生すると、サーバーにリクエストを送信してこれらのリソースをダウンロードするイベントがトリガーされます。

タグが DOM に追加されるimgと、サーバーにリクエストが送信され、src 属性で識別されるリソースが取得されます。画像が完全にダウンロードされると、ページにレンダリングされます。

Web サイトに適したサイズの画像を扱っていると仮定すると、画像を効果なしで通常どおり読み込むと、ダウンロードが完了すると画像が多かれ少なかれ即座に表示されるため、実際には遅延に気付きません。

しかし、フェードインやフェードアウトなどのエフェクトを追加すると、レイテンシーの影響が非常に明確になります。これは、実際のリソースの準備ができていなくても、JavaScript イベントが img 要素の CSS プロパティの変更を実際に開始するために発生します。

したがって、画像の読み込みが完了したときではなく、DOM 要素が DOM に追加されるとすぐに、fadeIn および fadeOut イベントが発生します。つまり、画像がまだダウンロードされている間に、fadeInまたはfadeOutアクションが発生します。これにより、部分的に色あせているがまだレンダリングされていないイメージが突然現れ、残りの部分でゆっくりと消える可能性があるため、耳障りな効果が生じます。

このアクションは、私たちが探しているスムーズで段階的な効果ではありません。

ここで、イメージを 2 回目、3 回目、4 回目、または n 回目にロードしたときに、これが発生しないことに気付くかもしれません。画像がブラウザによってキャッシュされるため、待ち時間が大幅に短縮され、fadeIn/fadeOut 効果が適切に表示されます。滑らかで段階的。

画像をフェードインするときに通常使用する手法は、最初に画像をプリロードすることです。すべての画像をプリロードするライブラリがありますが、ここでは、fadeIn イベントを適用する前に、画像をプリロードするための非常にシンプルで高速な手法を示します。

画像を隠し画像として HTML に配置します。

<!-- Hidden by default, but now preloaded for a smooth fadeIn effect -->
<img id="myImage" src="/images/myImage.png" style="display:none" />

jQuery を使用して、クリック イベントをバインドするときに非表示の画像を追加します。

クリックイベントが発生した後に画像がフェードインするものである場合、この手法が非常に役立つことがわかりました。

// preload the image while registering the click event
$('<img id="myImage" src="/images/myImage.png" style="display:none" />')
    .append("body");

$('button').click(function() {
    $('#myImage').fadeIn();
});

jQuery の load イベントを使用して、必要に応じて画像をプリロードします。

ユーザーがボタンをクリックして画像を表示しない可能性があります。したがって、ここでは、要求されたときに画像をプリロードする手法を示しますが、ユーザーを不快にさせることはありません。ユーザーがボタンをクリックしないことにした場合、サーバーからリソースが要求されることはありません。さらに、fadeIn イベントを発生させる前に画像が読み込まれるのを待つため、探している滑らかさも得られますが、プロセスが開始されるまでにわずかな遅延が生じる可能性があります。

// preload the image while registering the click event

$('button').click(function() {
    // place img element on page without specifying the src attribute
    $('<img id="myImage" style="display:none" />').append("body");

    // bind a load event to the image element so fadeIn doesn't start until
      // the image is completely downloaded
    $('#myImage').load(function() { 
        $(this).fadeIn();   // fade in the image
    });

});
于 2012-05-09T08:42:40.497 に答える