1

中央に大きな画像があり、下にサムネイルがあるシンプルな画像ギャラリーを作成しました。

<img class="primary-image" src="example.jpeg">
<div class="thumbnails"> 
    <img class="thumbnail" src="red.jpeg">
    <img class="thumbnail" src="blue.jpeg">
    <img class="thumbnail" src="green.jpeg">
</div>

サムネイルに次のクリックハンドラがあります。

$('.thumbnail').click(function() {
    var src = $(this).attr('src');
    $('.primary-image').attr('src', src);
});

これはChromeでは正常に機能しますが、Firefoxでは、画像が上から下にゆっくりと読み込まれ、そこにあることを意図していない醜い「遷移」が発生します。

何が起こっている？

アップデート

ブラウザに新しい画像が表示されないことに気づきました。また、それは特定の写真でのみ発生します。

  • すばやく上下にスクロールすると、画像が変わります。（サムネイルをクリックした後）
  • 画像キャンバス全体が表示されていて、何もしなかった場合、前の画像はそこに残り、新しい画像は表示されません。（サムネイルをクリックした後）
  • アプリケーションを切り替えてFirefoxに戻ると、新しい画像が表示されます。（サムネイルをクリックした後）
  • サムネイルをダブルクリックすると、画像が完全に変わります。
4

1 に答える 1

1

画像をプリロードしようとしましたか？たぶん、画像はChromeにキャッシュされていましたが、FireFoxにはキャッシュされていませんでした。

StackOverflowには、画像を簡単にプリロードするためのコードを投稿した人がいます。jQueryを使用した画像のプリロードをご覧ください

于 2012-08-22T21:03:59.983 に答える