0

サイトの pinterest スタイルのレイアウトをコンパイルしようとしています。そして、ロード時間以外はそれを達成しました。私は自分のサイトの負荷をできるだけ速く取得しようとしています。

そうするために、私は基本的に最初にサイトをロードし、次に画像をロードするレイジーロードスクリプト（ここにあります： http://www.appelsiini.net/projects/lazyload ）に出くわしました。 pinterest と同様に、読み込み中のサイトの..

私が抱えていた問題は、スクリプトが機能している間、スタイルを設定して表示する各画像の周りにボックスがあり、画像のサイズが定義されていないため、毎回レイアウトがめちゃくちゃになることです。基本的に、画像サイズは、読み込まれると常にレイアウトを驚かせます。

この問題を解決する最善の方法は何ですか? ピンタレストは何をしますか? それらと同様に、すべての形状とサイズの画像があり、ユーザーによって php と javascript の両方を介してサイトに動的に追加されるため、各画像のすべてのサイズを自分で把握することは、私たちにできることではありません。

ご協力いただきありがとうございます！

4

1 に答える 1

2

Pinterest はおそらく画像を測定し、画像の寸法をそこのデータベースに保存しています。次に、img タグ内の高さを出力するだけです。幅は CSS で設定されているため、動的ではありません。

最初に、css で設定されたルールが画像の幅を制御します (これは変更されません)。

.pin .ImgLink img
{
  max-width: 192px;
  opacity: 1;
}

.PinImageImg
{
  min-height:75px;
  background-color:#f2f0f0
}

次に、各 img タグの HTML マークアップが高さを制御します (これは画像ごとに変わります)。

<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />

この方法では、各画像が JavaScript によって読み込まれるため、レイアウトがポップすることはありません。

于 2013-01-18T21:46:47.990 に答える