2

最近、Yahoo! で画像をクリックすると、画像検索では、最初に低解像度の画像が表示され、その後徐々に高解像度の画像に変わります。

例： Yahoo! 画像検索

上のリンクをクリックしてすべての画像をクリックすると、常に低解像度の画像が最初に表示されていることがわかります。なぜ彼らはそれをしているのですか？この方法でウェブサイトの読み込みが速くなったように見えますか?

また、誰かがこれが実際にどのように行われるかについての方向性を教えてもらえますか (JavaScript を使用している場合は、できれば JQuery を使用して)。

4

2 に答える 2

2

この URL のサムネイルのキャッシュを使用しています

http://ts1.mm.bing.net/images/thumbnail.aspx?q=NUM&id=HASH

whereHASHとNUMare (どういうわけか) 特定のサムネイルへの参照です。

たとえば、NUM = 1148286928700とはこのサムネイルHASH = d2f4bbf91a853cefbc18794b6eb9ecddへの参照です。

もちろん、サムネイルは大きな画像よりもファイル サイズが小さいため、Yahoo! 最初にサムネイルのキャッシュからロードして、ユーザーに画像が何であるかを垣間見せ、バックグラウンドでフルサイズの画像をロードします。

彼らが使用する手法は、画像を隠しimgタグにロードし、その画像タグのイベントにバインドして、サムネイルをフルサイズの画像にload置き換える機能だと思われます。したがって、(非表示の) フルサイズの画像が読み込まれると、ページの読み込み時に表示されるサムネイル画像が置き換えられます。srcsrc

サムネイル画像がimgID のタグにロードされmain_image、フル サイズの画像がimgID の非表示タグに (バックグラウンドで) ロードされているとしますsecondary_image。次に、 のloadイベントにバインドし、ロード時にを#secondary_image置き換えます。src#main_image

$('#secondary_image').load(function() {
  // on big image load, replace the src of the thumbnail image
  $('#main_image').attr('src', $(this).attr('src'));
}

次に、ユーザーが別の画像を表示したい場合は、srcの#main_imageを別のキャッシュされたサムネイルに置き換え、srcの#secondary_imageを大きな画像に置き換え、イベントを再度バインドしloadます (理想的には、上記のコードで関数を作成し、これを呼び出します)を変更するたびに機能します#secondary_image src。

于 2011-09-17T09:41:10.557 に答える
1

彼らがしているのは、最初にサムネイルを表示し、次に少し待ってから（実際のサイトの帯域幅を節約するため）、実際の画像をロードすることだけです. そのためには、おそらく画像の src 属性を変更するか、別の画像を追加するだけです。

サムが Bing によって提供されていることに注意してください。

于 2011-09-17T09:40:26.873 に答える