Путешествие во времени с loading lazy
Второй раз за месяц сталкиваюсь с loading lazy в изображениях.
Сначала, когда оптимизировал микрофронтенд.
Спойлер: речь не про метрику LCP 🤫
Узнать про LCP и чем занимался 👇 Как браузер рисует страницы Анализ загрузки страницы LCP попытка улучшить метрику LCP
Затем, когда готовился к собеседованию разработчика.
Было интересно вспомнить, как раньше жили без loading="lazy"🧐
Начнем от современных к олдовым.
Можно через Intersection Observer. API, которое помогает понять, находится элемент в области видимости или нет 👀
Еще вариант: отслеживать прокрутку к изображению через событие scroll.
Конечно, не обойтись без библиотек:
- lazysizes
- lozad.js
- jquery lazy
Кстати, loading="lazy" внутри реализован через Intersection Observer 🤓
Как вам путешествие во времени?
Есть еще способы, но решил перечислить только основные.