-
-
Save nikolai-shabalin/ac484ebd2efd11ad2c8842c8992d11c5 to your computer and use it in GitHub Desktop.
@Pavel-Liteiniy
На первом видео вашей статьи показано как это работает.
Если коротко, то этим атрибутом мы подсказываем, когда требуется картинка. В данном случае, когда она находится рядом с областью просмотра пользователя или в области просмотра.
Если все картинки находятся в области просмотра, то они загрузятся все.
Чтобы посмотреть загрузилась картинка или нет, достаточно зайти в developer tools -> Network -> img и убедиться в работоспособности.
Также напомню, что атрибут loading работает не везде - https://caniuse.com/#search=loading
Ещё это не заработает, если вы добавили 100 картинок, но путь всегда к одной src/image.jpg. Мало ли вы в рамках теста так сделали. Это не заработает.
Чтобы протестировать работу loading="lazy"
- Используйте браузер, который поддерживает этот атрибут
- Добавьте на тестовую страницу много картинок, так чтобы появился скролл на странице. Думаю два-три экрана вьюпорта будет достаточно
- Картинки должны быть разными
- Откройте developer tools -> Network -> Img
- Медленно начните скролить страницу. Так вы начнёте наблюдать в какой момент загружаются картинки
После множества экспериментов с этим атрибутом я смог найти причину, по которой этот атрибут не давал нужного мне эффекта. На работу этого атрибута влияло содержимое другого атрибута - src
Например, ленивая загрузка у картинки с таким атрибутом работать не будет:
<img loading="lazy" class="highlight__image" src="img/[email protected]" srcset="img/[email protected] 2x" width="260" height="315" alt="Фото товара - вязаные корзинки" />
А вот для такой картинки атрибут loading="lazy" даст нужный эффект:
<img loading='lazy' src='https://placekitten.com/499/499' width='499' height='499' alt=''>
Но для меня остается непонятным почему это отличие так влияет на ленивую загрузку изображений и как вообще с этим жить дальше...
P.S. Данная ситуация имела место в хроме. При тестировании в мозиле ленивая загрузка работает корректно
Добрый день! Я попытался добавить "ленивую" загрузку изображений в проект, но она не работает. В лекции эта тема упоминается очень коротко и я подумал может быть я что-то упускаю? Если я правильно понимаю, то на данный момент для того, чтобы эта технология заработала достаточно изображениям
<img>добавить атрибутloading="lazy"? После того, как я добавил атрибут и попытался проверить в инспекторе, все изображения все равно загружались игнорируяloading="lazy". Вот здесь читал информациюhttps://web.dev/native-lazy-loading/