Какие HTML-элементы, загруженные с такими же размерами, что и изображение, помогают избежать перекомпоновки DOM? - PullRequest
1 голос
/ 20 июня 2019

У меня есть несколько больших изображений вверху страниц сайта.Заголовки сообщений накладываются поверх изображений и используют некоторую прозрачность (что, я думаю, добавляет к проблеме).Изображения загружаются поздно и, поскольку они являются заметным элементом над сгибом, это приводит к очень заметному переизбранию DOM.В основном, остальная часть страницы загружается, а затем отталкивается из-за поздней загрузки изображения.

Существуют ли HTML-элементы, которыми я могу окружить место возможной посадки изображения, которое будет препятствовать загрузке другого содержимого вместо изображения и, следовательно, его "проталкивать вниз"?

Идея состоит в том, чтобы взять блочный html-элемент с теми же размерами и положением, что и загружаемое изображение.В этом случае, даже если изображение не загружено, отсутствует «толчок», который выталкивает дополнительный контент по экрану.Я искал ресурсы или примеры по этому вопросу.Но не нашли ни одного.

1 Ответ

4 голосов
/ 20 июня 2019

Вы можете определить размер изображения (в пикселях) в HTML, используя атрибуты width и height (для самого тега img). Вы также можете использовать CSS для определения ширины и высоты элементов img. Этот ответ предоставляет более подробную информацию о том, как эти два взаимодействуют.

Определяя размер, пространство для изображений будет выделено до загрузки изображения. Фактически, если вы определите размер таким образом, браузер отобразит изображение в указанном пространстве, даже если фактический размер изображения будет другим.

Вы также можете поместить оболочку div вокруг изображений, которые определяют размер в CSS, чтобы вы не столкнулись с какими-либо странными артефактами определения ширины и высоты изображения (если оно отличается от фактических размеров изображения).

И, как отметил @Grzegorz T в комментариях, вы должны попытаться уменьшить размер файла изображения, чтобы сайт в целом быстрее загружался.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...