サイトのページの上部に大きな画像がいくつかあります。投稿のタイトルは画像の上に重ねられ、ある程度の透明性を利用します（これは問題に追加されると思います）。画像の読み込みが遅くなり、スクロールせずに見える範囲の目立つ要素であるため、非常に目立つDOMリフローが発生します。基本的に、ページの残りの部分が読み込まれ、読み込みが遅い画像によって押し下げられます。
画像の最終的な着陸位置を囲むことができるhtml要素はありますか？それにより、他のコンテンツが画像の代わりに読み込まれ、結果として「プッシュダウン」されるのを防ぎますか？
ここでの考え方は、ロードする画像と同じサイズと位置のブロックhtml要素を取得することです。この場合、画像が読み込まれていなくても、追加のコンテンツを画面に押し下げる「衝撃」はありません。私はこれに関するリソースや例を探しました。しかし、何も見つかりませんでした。
（タグ自体の）属性widthとheight属性を使用して、HTMLで画像サイズ（ピクセル単位）を定義できますimg。CSSを使用して、img要素の幅と高さを定義することもできます。この回答は、2つがどのように相互作用するかについての詳細を提供します。
サイズを定義することにより、画像が読み込まれる前に画像のスペースが割り当てられます。実際、このようにサイズを定義すると、実際の画像サイズが異なっていても、ブラウザは指定されたスペースに画像を表示します。
またdiv、CSSでdefine the sizeを使用する画像の周りにラッパーを配置して、画像の幅と高さの両方を定義するという奇妙なアーティファクトに遭遇しないようにすることもできます（画像の実際の寸法と異なる場合）画像）。
また、コメントで@Grzegorz Tが指摘しているように、サイトの読み込みが一般的に速くなるように、画像ファイルのサイズを小さくするようにしてください。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加