1

読み込まれた画像を表示する際に問題が発生しています。私が望む効果は、画像の後ろに読み込み中の .gif を表示し、読み込み時にフェードインすることです。

$(function() {
    $("#products img").hide().bind("load", function() {
        $(this).fadeIn(300);
    });
});

これは、IE を除くすべてのブラウザーでうまく機能することに注意してください (テスト済みの 9 のみ)。私が理解していることからload、イベントがバインドされる前に画像がキャッシュされているか、画像が読み込まれているため、イベントが発生していません。ブラウザに画像をキャッシュさせたいので、画像の src の最後に日付/時刻スタンプを追加することは実際にはオプションではありません。

私が言える方法はありますIf the image is already loaded in some form or another, show it. Otherwise hide it and fade it in once it's loaded.か？

編集：フィドルを設定しようとしましたが、あまり好きではありませんでした。参考になればとにかくこちら

編集

誰かが興味を持っている場合は、2 つの回答に対して 簡単な js パフォーマンス テストを用意しました。（出典：グラビラ .com）ここに画像の説明を入力

4

2 に答える 2

4

私は同じ問題を抱えていて、次のように解決しました：

 $("#products img").one('load.FadeIn', function () {
     $(this).fadeIn(300);
 });

 $("#products img").trigger('load.FadeIn');

画像が既に読み込まれてフェードインするか、手動でイベントをトリガーします。

于 2013-02-27T09:43:39.883 に答える
2

まだロードされていない画像のみを渡すフィルターを追加できます。 

$("#products img")
  .filter(function(i, img) { return ! img.complete })
  .hide()
  .bind("load", function() {
    $(this).fadeIn(800);
  });

デモ

于 2013-02-27T09:49:26.980 に答える