4

私は多くの画像を含む写真サイトで作業していますが、このサイトを 100% 流動的にしたいので、高さと幅が固定されていません。画像の醜い Chrome 再描画をどのように回避しますか? (つまり、画像は最初に高さゼロで表示され、次にレイアウト全体を移動する最終的なサイズに再スケーリングされます)

私はほとんどすべてを試しましたが、最後のオプションは、画像の再描画を黒い div で非表示にし、画像の読み込みが完了したら不透明度を 0 に設定することです (ところで、これを (document).ready 呼び出しで試しましたが、早すぎるようです: どうやってそれをしますか?)

4

4 に答える 4

3

画像の高さと幅の属性 / サイズを指定します。

<img src="img.jpg" width="125" height="60" alt="My First Photograph ever">

これにより、ブラウザーはページをレイアウトするための 2 回目のパスを回避でき、ページの読み込みも最適化されます。:)

于 2011-11-17T11:47:07.980 に答える
1

Chrome (または実際には任意のブラウザー) は、画像のサイズが事前にわからないため、この「再描画」を回避できません。

したがって、画像の幅と高さのプロパティ自体、または CSS を使用して、画像のサイズを明示的に指定する必要があります。

于 2011-11-17T12:11:56.513 に答える
1

2年以上遅れていることはわかっていますが、ここで提案されているプラ​​クティスはどうですか?

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</div>


.embed-container {
    position: relative;   
    height: 0;
    overflow: hidden;
    background-color:black;  
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
padding-bottom:100%; /* ... */

また、注意を払い、元の手法を改善するためのコメント セクションからの重要な発言:

ナイストリック。ただし、私があなただったら、「img」タグを div の背景画像 (および background-size: cover または contain) に置き換えます。これにより、位置のトリック、オーバーフローのトリック、およびブラウザーの多くの作業を回避できます。

誰かがこれが役立つことを願っています。

于 2013-12-16T19:14:08.217 に答える
0

テストするのは難しいですが、CSS で幅/高さを設定してみてください。

img {display: block; width: 100%; height: auto;}

画像を全幅にしたい場合。これにより、ページ全体の再描画が妨げられる可能性がありますが、もちろん、画像の読み込みに関係なく、ある程度の再描画が行われます。Chromeで何が起こっているかを調査することもできます--show-paint-rects

それが役立つことを願っています

于 2012-03-24T05:51:14.357 に答える