텍스트, 이미지 태그 및 다음과 같은 일부 텍스트가 포함된 HTML 페이지가 있습니다.

이미지 앞의 텍스트입니다.  이미지 뒤의 텍스트입니다. 

이제 페이지가 로드될 때 이미지를 로드하는 데 시간이 더 오래 걸리기 때문에 텍스트가 이미지보다 먼저 로드됩니다. 따라서 이미지 뒤의 텍스트가 이미지 앞의 텍스트 바로 뒤에 오는 레이아웃 변경이 발생하며, 이미지가 아직 로드되지 않은 경우 이미지를 위한 공간이 예약되지 않습니다. 그러나 이미지가 로드되면 이미지 뒤의 텍스트가 아래로 이동합니다. 즉, 레이아웃이 변경됩니다. 레이아웃 변경을 방지하기 위해 이미지를 로드하기 전에 이미지 공간을 예약하려면 어떻게 해야 합니까? 또한 이미지 태그에는 모든 이미지가 포함될 수 있으며 이미지 크기도 동적입니다. 이미지의 원본 크기가 페이지에 나타나야 합니다. 또한 서버사이드 렌더링을 사용하고 있기 때문에 표시하려는 이미지의 크기를 미리 알고 있습니다. 이미지의 높이와 너비를 수정할 수 없습니다. 이렇게 하면 디스플레이 크기가 변경되고 이미지가 더 이상 화면 크기에 맞지 않을 때 문제가 발생하기 때문입니다.