0

.photo_containerを保持する親divがあり、 CSS属性を使用してimgこのディメンションに拡張されます。imgdisplay: inline-block

問題：ページには多くの.photo_containerdivがあり、画像の読み込みには時間がかかるため、すべてのimg読み込みの前に、ページは小さな未ストレッチのdiv（数ピクセルのパディング）で埋められてから、それぞれに対応するように拡張さimgれます1つずつロードします。

img子がロードされたときにサイズを変更する必要がないように、divを正しいサイズに「事前ストレッチ」することは可能ですか？

これは、画像が読み込まれる前（醜い！）と後の様子を示しています。

ここに画像の説明を入力してください

コード：

<div class="photo_box">
    <img src="..." />
</div>
4

1 に答える 1

0

実際に画像をロードしない限り（JSまたはCSSで）、画像のサイズを知る方法はありません。したがって、JSを使用してコンテナのサイズを動的に設定するかどうかは関係ありません。最初に画像を読み込む必要があるため、しばらくの間、「醜い」空のコンテナが表示されます。

したがって、.photo_containerに最小サイズを追加します。少なくともすべての親指の幅が一定しているように見えるので、のようにします.photo_container { min-width:100px; min-height:50px }。次に、各画像にonLoadコールバックを追加し、それに応じて親のサイズを変更します。

jQueryを使用する場合は、次のようにします。

$('.photo_container img').each(function() {
  $(this).bind('load', function() {
    var w = $(this).width(),
        h = $(this).height();
    $(this).parent('.photo_container').attr({ width: w+'px', height: h+'px' });
  }
});
于 2012-06-26T00:56:18.597 に答える