#фишка дня
Обратите внимание на иллюстрацию, если я её не сильно зашакалил, конечно. Ничего интересного не замечаете?
Действительно, три раза гружу страницу и три же раза подгружается разное число изображений.
Все изображения при этом имеют атрибут loading=“lazy”, знаменитая “ленивая” загрузка. Грузятся только те изображения, что видны. И ещё те, до которых вы (вероятно) планируете скроллить.
Так вот, три раза — разное число. Почему же?
И тут кроется самое интересно: первый — без троттлинга (замедления) сети, второй — Fast 3G, третий — Slow 3G.
Т. е. Chrome грузит тем больше картинок, чем медленнее сеть. Казалось бы, где логика? Но давайте подумаем. Slow 3G редко значит “просто медленно”, скорее всего — ваше соединение нестабильно (поезд, метро). А ничего так не раздражает на нестабильном соединении, как ожидание ленивой подгрузки изображений.
Такая вот казалось бы вывернутая наизнанку логика, не лишённая изящества.
Попробуйте сами: https://mathiasbynens.be/demo/img-loading-lazy
#chrome #lazy #img
Обратите внимание на иллюстрацию, если я её не сильно зашакалил, конечно. Ничего интересного не замечаете?
Действительно, три раза гружу страницу и три же раза подгружается разное число изображений.
Все изображения при этом имеют атрибут loading=“lazy”, знаменитая “ленивая” загрузка. Грузятся только те изображения, что видны. И ещё те, до которых вы (вероятно) планируете скроллить.
Так вот, три раза — разное число. Почему же?
И тут кроется самое интересно: первый — без троттлинга (замедления) сети, второй — Fast 3G, третий — Slow 3G.
Т. е. Chrome грузит тем больше картинок, чем медленнее сеть. Казалось бы, где логика? Но давайте подумаем. Slow 3G редко значит “просто медленно”, скорее всего — ваше соединение нестабильно (поезд, метро). А ничего так не раздражает на нестабильном соединении, как ожидание ленивой подгрузки изображений.
Такая вот казалось бы вывернутая наизнанку логика, не лишённая изящества.
Попробуйте сами: https://mathiasbynens.be/demo/img-loading-lazy
#chrome #lazy #img
👍21
#обман дня
Не так давно мы с вами радостно приветствовали введение штатной «ленивой» загрузки для тегов img и iframe. Был добавлен атрибут loading, который может принимать значение lazy и eager. Перевод, думаю, не требуется.
И блоги разработчиков и соиздателей браузеров радостно кричали: «Теперь ленивая загрузка картинок возможна даже при отключённом в браузере JS». Пруф (04.09.2022): https://web.dev/browser-level-image-lazy-loading/#:~:text=still%20works%20even%20if%20javascript%20is%20disabled
Хрена с два. Мы тут с пользователем Твиттера Стефаном Юдисом выяснили, что ленивая загрузка в Chrome таки отключается. Как и обещал нам MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
Статья в блоге Chrome на днях будет исправлена. А вы пока попробуйте предположить, почему так. Это очень забавно.
#js #lazy #img
Не так давно мы с вами радостно приветствовали введение штатной «ленивой» загрузки для тегов img и iframe. Был добавлен атрибут loading, который может принимать значение lazy и eager. Перевод, думаю, не требуется.
И блоги разработчиков и соиздателей браузеров радостно кричали: «Теперь ленивая загрузка картинок возможна даже при отключённом в браузере JS». Пруф (04.09.2022): https://web.dev/browser-level-image-lazy-loading/#:~:text=still%20works%20even%20if%20javascript%20is%20disabled
Хрена с два. Мы тут с пользователем Твиттера Стефаном Юдисом выяснили, что ленивая загрузка в Chrome таки отключается. Как и обещал нам MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
Статья в блоге Chrome на днях будет исправлена. А вы пока попробуйте предположить, почему так. Это очень забавно.
#js #lazy #img
web.dev
Browser-level image lazy loading for the web | Articles | web.dev
This post covers the loading attribute and how it can be used to control the loading of images.
😱7👍4