9

画像でいっぱいのページがあり、ロード時に各画像をフェードインさせたいです。次のコードは機能しますが、バグがあるように見えます。基本的に、すべての画像がフェードインしない場合があります。

誰かがこれを改善する方法の提案がありますか？

ありがとう

$('.contentwrap img').hide().load(function () {
    $(this).fadeIn(1000);
});
4

11 に答える 11

9

すべての画像がフェードインしない場合があります。

ええ、これは通常、かなり基本的な問題です。一部の画像は、ロードイベントハンドラーを割り当てる前にロードを終了します。これは、画像がキャッシュされている場合に特に発生する可能性があります。

画像がHTMLの場合、信頼できる唯一の方法は、残念ながら、（非常に醜い）インラインonload属性を含めることです。

<img src="..." alt="..." onload="$(this).fadeIn();">
于 2009-11-09T13:39:34.623 に答える
7

画像がブラウザのキャッシュから読み込まれる場合、読み込みイベントがトリガーされない可能性があります。この可能性を説明するために、画像の.completeプロパティの値をテストできます。

$(document).ready(function() { 

    $('img').hide();
    $('img').each(function(i) {
        if (this.complete) {
            $(this).fadeIn();
        } else {
            $(this).load(function() {
                $(this).fadeIn();
            });
        }
    });
});
于 2012-10-11T15:01:21.277 に答える
4

このコードをサイトのセクションに配置します。

<script>
         $('body').ready(function() { 

        $('img').hide();
        $('img').each(function(i) {
            if (this.complete) {
                $(this).fadeIn();
            } else {
                $(this).load(function() {
                    $(this).fadeIn(2000);
                });
            }
        });
    });
 </script>

これは最も雄弁な解決策ではないかもしれませんが、仕事は完了します。実際の例を見たい場合は、私が使用したこのサイトをチェックしてください。

于 2013-02-27T19:18:44.100 に答える
2

hide最初に、いくつかの CSS を使用して、画像がデフォルトで非表示になっていることを確認できます (jQuery 呼び出しの必要性を排除します)。

.contentwrap img {
    display:none;
}

そして、あなたの document.ready で、次のことを試すことができます。一部の画像が（舞台裏で）2回フェードインしようとしている可能性があるという点で、ここにいくつかの冗長性があることを認めますが、最終結果はまったく同じに見えます. これは、これに対する簡単な答えを出すために私が認めるトレードオフです。

document.ready で、一部の画像が読み込まれ (特に既にキャッシュされている画像)、まだ保留中の場合があります。

// fade in images already loaded:
$('.contentwrap img').fadeIn(1000);
// and tell pending images to do the same, once they've finished loading:
$('.contentwrap img').load(function () {
    $(this).fadeIn(1000);
});

jQuery はアニメーション効果を「スタック」するため、何かが完全にフェードインしたら、再びそれに対して fadeIn を呼び出すことができますが、(目に見えて) 何も起こらないはずです。

これが受け入れられない場合は、負荷イベントを設定する前に、どの画像がフェードインされ、どの画像がフェードインしていないかを確認するためのより複雑な方法を考案することができます。

幸運を！

于 2009-11-09T19:40:08.787 に答える
2

私はちょうどこのスレッドでこれに答えました: jQuery How do you get an image to fade in on load?

私のために働く！

于 2011-02-08T11:37:03.943 に答える
0

Document.readyでその関数を呼び出していますか？

  $(document).ready(function() {
      // put all your jQuery goodness in here.
  });

http://www.learningjquery.com/2006/09/introducing-document-ready

于 2009-11-09T13:05:20.580 に答える
0

David DeSandro のクールなスクリプトを使用して、画像が読み込まれたかどうかを確認します。(たとえば、読み込まれた画像にクラスを追加する関数を作成できるため、css トランジションを使用してフェードインします。チェックしてください:
http://desandro.github.io/imagesloaded/

于 2013-09-16T16:47:52.370 に答える
0

私は最近、この混乱に対処しました。私はこの同様の質問に答えましたが、それはまさにあなたが求めているものではありません...

JavaScriptで画像の実際の幅と高さを取得しますか? (Safari/Chrome)

于 2009-11-09T19:43:05.840 に答える
0

すべての画像を 1 つの画像にまとめてフェードインすることもできますが、同時にすべての画像を取り込むと、大きなファイルになります。何に使いたいかによります。

于 2015-12-24T09:21:38.653 に答える
0

キャッシュされた画像を処理するために、bobince のソリューションは機能しますが、彼が言ったように、かなり醜いです。

別の解決策は、css で画像を非表示にして、次の JavaScript を使用することです。

$(window).load(function(){
  $('.contentwrap img').not(':visible').fadeIn(1000);
});

function showImages() {
  $('.contentwrap img').load(function () {
        $(this).fadeIn(1000);
  });
});

showImages();

このようにして、ほとんどの画像が適切に読み込まれ、それらがキャッシュされてすぐに非表示になった場合 (読み込み関数を起動する時間がない場合)、ページの読み込みイベントによってそれらが表示されます。ページの load イベントにより、すべてが読み込まれたことが保証されます。

于 2011-12-17T16:20:00.950 に答える
0

この関数の中にコードを入れてください。$(document) を使用すると、dom が読み込まれるとすぐに機能します。body を使用する場合は、body が完全に読み込まれると開始されます。そうすれば、ボディがロードされた後、画像は常にフェードインします。

$('body').ready(function() {
    //your code here
});
于 2010-12-02T20:10:38.707 に答える