1

次のhtmlがあるとしましょう：

<div id="container">
    <img id="large-image" src="/img/large-image.jpg" />
    <img id="large-image-thumb" src="/img/large-image-thumb.jpg" />
</div>

サムネイルが画像と同じサイズになるようにするにはどうすればよいですか? これを構造化するより良い方法はありますか？

これの機能は、低品質バージョンが既にロードされている場合に、完全品質バージョンのロード中に低品質バージョンの画像を提供することです (したがって、プログレッシブ jpg は役に立ちません)。これは、ギャラリーのサムネイルをクリックしたときに大きな画像を表示するために使用されます。

ああ、大きな画像が読み込まれる前に幅と高さを知っていますが、可能であればJavaScript内で明示的なサイズを設定したくありません。可能であれば、ユーザーがウィンドウのサイズを変更したときに拡大縮小する必要があります。イベントをキャッチすることは、resize()ただ汚いと感じます。

4

3 に答える 3

1

古代の（しかしまだ有効な）手法は、IMGタグのLOWSRC属性を使用することです。これは、画像のダウンロードに長い時間がかかったダイヤルアップ時代に使用されていました。人々はそれを低解像度+低パレットバージョンに使用して、フルバージョンが後でロードされている間にすばやくロードしました。

<img src="... big image ..." lowsrc="... same size but small file image ..." />
于 2011-04-08T22:02:07.930 に答える
0

質問の最後の部分で少し混乱しています。画像がブラウザ ウィンドウに対して相対的に拡大縮小されている場合、大きい画像と小さい画像に対して同じことができます。css を使用して、(たとえば) 高さまたは幅を 100% に設定するだけです。

JavaScript を使用して大きな画像を読み込み、読み込み時に小さな画像を置き換えることもできます。これにより、最初のページ読み込み後に小さな画像が最初に読み込まれるようにプログラムできます。

jQuery では、「通常の」ページ全体が読み込まれたときに、次を使用して大きな画像の読み込みを開始できます。

$(window).load(function() {
    large_image = new Image();
    large_image.src = "/img/large-image.jpg";
    // etc.

    // replace the source of the small image with the big image
    // you will need some additional code to check for the load event of the large images
});
于 2011-04-08T22:29:06.033 に答える
0

jQueryでできること

var largew = $('#container').find('img').eq(1).width(),
    largeh = $('#container').find('img').eq(1).height();
$('#container').find('img').eq(0).css({
    height: largeh,
    width: largew
});

サムネイル画像は、大きな画像と同じサイズになります。eq(0)親指である最初の画像をeq(1)参照しており、大きな画像である2番目の画像を参照しています。これは、内部にこの順序でそれらがあることを前提としています#container。また、画像には id の代わりに class を使用する必要があります。これは、他のイメージで同じ ID 名を使用する予定がある場合です。id は、多数の HTML 要素に適用できるクラスとは異なり、HTML で 1 回しか使用できません。

動作例を確認してくださいhttp://jsfiddle.net/7j7kJ/

于 2011-04-08T22:22:53.423 に答える