-
Notifications
You must be signed in to change notification settings - Fork 630
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ленивая загрузка картинок с цветным превью #4532
Ленивая загрузка картинок с цветным превью #4532
Conversation
ae957e7
to
044efe2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Спасибо за рецепт и милого котика в демке, кстати ❤️
Привет! Спасибо большое за рецепт! В демке минимум элементов, поэтому и стилей нужен минимум. Можно их просто перечислить :)
И ещё нужно положить котика в репо рядом с демкой в папку images:
Мы стараемся не полагаться на сторонние сервисы и хостинги. |
d69cbd5
to
f30987e
Compare
f30987e
to
1e4cc90
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@prorokky приветик! Большое спасибо за рецепт.
Я бы предложила его немного расширить и дополнить. Будет круто, если ты сделаешь это самостоятельно, но если будет слишком сложно - тегни меня и я тебе помогу
- Давай добавим картинке размеры и объясним зачем это сделано. (чтобы избежать LCP)
- Давай добавим информацию о browser hints, которые помогут еще гибче управлять загрузкой картинки (посмотри в сторону атрибута fetch-priority)
- Давай уточним случаи, когда не нужно использовать lazy loading через атрибут (не нужно когда картинка гарантированно сразу во вьюпорте)
- Давай добавим более интересное превью чем просто цветной фон. Тут много интересных вариантов. В идеале бы перечислить несколько. Например
- progressive images - которые позволют подгрузить сначала превьюшку низкого качества
- явное создание картинки-превью низкого разрешения. По аналогии с тем что делает next/image
3d697fa
to
b967460
Compare
b967460
to
38c65fe
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Оставила немного редакторских правок =)
@HellSquirrel, @solarrust, загляните сюда? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Большое спасибо за рецепт! Получилось отлично =)
Превью контента из 510f77f опубликовано. |
Описание
Добавлена статья, в которой описан процесс добавления цветного превью для картинок, если они загружаются в "ленивом" режиме
Closes #2739
Превью: https://content-4532.dev.doka.guide/recipes/lazy-load-with-preview/
Чек-лист
/css/color/
,/tools/json/
,/tools/gulp/#kak-ponyat
)images/example.png
,demos/example/
,../demos/example/
)