Сайт Романа ПарпалакаБлог20230404

Отложенная загрузка картинок через атрибут lazyload

Оказывается, в браузерах уже есть встроенная поддержка «ленивой» загрузки картинок: далекие от видимой области сайта картинки даже не начинают скачиваться. За это отвечает атрибут loading="lazy" у тега img. Цель простая — экономия трафика. Раньше для ее достижения приходилось писать логику на js. Но встроенная в браузер поддержка, конечно, должна работать точнее.

Чтобы определение области видимости работало правильно, у картинок должны быть прописаны размеры (width и height). Но вообще их и так надо было прописывать, чтобы избежать «эффекта упячки».

Думаю, этот атрибут есть смысл всегда использовать для картинок из основного содержимого. По крайней мере, я не вижу недостатков, если так делать. Добавил в S2 автоматическое добавление атрибута loading="lazy" для загружаемых картинок. Посмотрим, как будет работать, может когда-нибудь обнаружатся подводные камни.

4 апреля 2023 года, 00:27     веб-разработка · браузеры
Поделиться

Мониторинг производительности приложений в New Relic Ctrl Храните состояние долгоживущих процессов в базе данных, а не в памяти

Читайте также

Viewport в Edge
Здесь описывается технология, которая была реализована только в браузерах Opera и IE.
2017

Миниатюры на PHP
В ходе разработки и обслуживания сайтов часто возникает необходимость в создании миниатюр — уменьшенных копий изображений. В тексте страницы вместо большой картинки можно поместить такую копию, являющуюся ссылкой на исходный файл.
2007
Офлайн-версия сайта, или PDF и PHP
Недавно я сделал офлайновую версию статей с written.ru. Технически это pdf-файл размером немногим больше мегабайта, который автоматически генерируется на сервере.
2008
Латех и веб-технологии
В прошлый раз я рассказал о своем сервисе, который генерирует для веба картинки с математическими формулами на латехе.
2014

Оставьте свой комментарий


Выделение текста: [i]курсивом[/i] или [b]жирным[/b].
Цитату оформляйте так: [q = имя автора]цитата[/q] или [q]еще цитата[/q].
Других команд или HTML-тегов здесь нет.

Записи