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