Skip to content

Instantly share code, notes, and snippets.

@nikolai-shabalin

nikolai-shabalin/htmlcss-2__section-9.md

Created March 30, 2020 12:35
Show Gist options
  • Save nikolai-shabalin/ac484ebd2efd11ad2c8842c8992d11c5 to your computer and use it in GitHub Desktop.
Save nikolai-shabalin/ac484ebd2efd11ad2c8842c8992d11c5 to your computer and use it in GitHub Desktop.
Download ZIP
Вопросы к разделу «Производительность вёрстки» на 19 потоке
Raw
htmlcss-2__section-9.md

Вопросы к разделу «Производительность вёрстки»

@Pavel-Liteiniy
Copy link

Pavel-Liteiniy commented May 16, 2020 •
edited
Loading

@nikolai-shabalin

После множества экспериментов с этим атрибутом я смог найти причину, по которой этот атрибут не давал нужного мне эффекта. На работу этого атрибута влияло содержимое другого атрибута - 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. Данная ситуация имела место в хроме. При тестировании в мозиле ленивая загрузка работает корректно

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment