レイアウトの変更を防ぐために、可変サイズの画像をロードする前にそのスペースを予約するにはどうすればよいですか?

Question

テキスト、画像タグ、および次のようなテキストを含む HTML ページがあります。

これは画像の前のテキストです。

    <img src="image.jpeg"/>


画像の後の文章です。 

画像の読み込みには時間がかかるため、ページが読み込まれると、画像よりも先にテキストが読み込まれるようになりました。そのため、画像の後のテキストが画像の前のテキストの直後に配置されるようにレイアウトが変更され、画像がまだ読み込まれていない場合、画像用のスペースは確保されません。ただし、画像が読み込まれると、画像に続くテキストが下に移動します。つまり、レイアウトが変わります。レイアウトの変更を避けるために、画像を読み込む前に画像用のスペースを予約するにはどうすればよいですか?さらに、任意の画像を画像タグに含めることができ、画像のサイズも動的です。画像の元のサイズがページに表示される必要があります。また、サーバーサイドレンダリングを使用しているため、表示したい画像のサイズが事前にわかっています。画像の高さと幅を修正することはできません。画像のサイズが変更されて表示されると、画像が画面のサイズに適合しなくなるため、問題が発生します。

Answer 1

1- イメージをコンテナーに配置します。

2- コンテナに固定の width と height、および固定の min-height と min-width を指定します。ニーズまたは画像の 解像度 に応じて設定できます。

＃＃＃それでおしまい。

js コードについては心配しないでください。意味を理解していただくために、3 秒後の画像を表示したいだけです。

リーリー リーリー リーリー