0

メイン画像のいくつかの異なるサイズをロードするページがあります。ただし、すべての大きな画像が一度に読み込まれるわけではありません。

シナリオはこれです。

私はすべての大きな画像の親指を含むスライダーを持っています。これらはすべて、ページが読み込まれるときに読み込まれます。

デフォルトの大きな画像はページが読み込まれるときに読み込まれますが、他の大きい画像は、ユーザーがその画像のサムネイルをクリックした場合にのみ読み込まれ、大きな画像のsrcをそのように置き換えます。

function changeMainImage(image) {

    // Set big image
    var big_image = image + '-big.png'

    // Update main image url
    jQuery('#main_image').attr('src', big_image);

}

これで、ページが読み込まれるときに大きな画像が読み込まれないため、大きな画像が表示されるまでにわずかな遅延が発生しますが、これはかなり望ましくありません。

今、私は、大きな画像をロードし、親指を使わずに、ブラウザに大きな画像をサムネイルに拡大縮小させるだけで、1つの石で2羽の鳥を殺すことができると考えています。私はいつもこの方法を親指に使用するサイトを嫌っていたので、私はこの方法でそれをやるのにちょっとうんざりしていますが、私の場合はとにかく大きな画像をロードする必要があるのでそれは有効なようです。

これにより、httpリクエストの数を減らすことができ1 * amount of pics、親指をクリックすると大きな画像をすぐに読み込むことができます。

私の唯一の懸念は、画像が正しい比率に拡大縮小されるようにブラウザに正しいサイズを与える方法と、ページに12枚の画像がある場合の事実を理解しようとすることです。このようにして、ユーザーが12個すべてを見ることに興味がないときに、12個すべての大きな画像を一度にダウンロードするようにしています。

どちらのバージョンにも長所と短所があります-ここで何をすべきかアドバイスはありますか？

4

1 に答える 1

3

あなたが現在持っている方法は、私が好むものです。表示されているものをロードします。

現在、ユーザー エクスペリエンスを向上させるために、多くのサイトではいくつかの手法が使用されています。1 つ目は、次の 1 つまたは 2 つのイメージをプリロードすることです。スライドショーのような表示があり、画像がどのような順序で表示されるかがよくわかっている場合は、これで問題ありません。

2 つ目は、大きなバージョンのダウンロード中にサムネイルを表示することです。サムネイルが適切なサイズである場合、これにより、ユーザーはクリックが機能したという視覚的なフィードバックを得ることができ、適切な接続で画像がすぐにダウンロードされます.

最後に、プログレッシブ JPEG を使用することをお勧めします (画像が写真の場合)。これにより、読み込み時に画像が強調されます。

サイズに関するデータ (およびその他のメタデータ) については、オブジェクトの JavaScript 配列、または画像データを保存するその他の場所に保管してください。サーバーからのトランジットに JSON を簡単に使用できます。

于 2012-11-30T17:34:27.083 に答える