Ми}{@лbI4

Блог хеллоуворлдщика

Lazy loading баг в Firefox и Safari

22.07.2023 lazy loading, firefox, safari, bug

Столкнулся с интересным багом в Firefox и Safari, при попытке использовать loading="lazy" на теге <img />. Это был тот самый случай, когда порядок атрибутов важен.

Данный баг на момент написания статьи был обнаружен еще три года назад, но пока что никак не исправлен.

Из баг репорта можно получить исчерпывающую информацию:

If you define the "loading" attribute at "lazy" AFTER the "src" attribute, it has no effect (all images are loaded, even those not in the viewport).

If you define the "loading" attribute at "lazy" BEFORE the "src" attribute, it applied as expected (only images in the viewport are loaded).

Другими словами, если написать вот так

<img src="/path/to/img.jpg" loading="lazy" />

lazy loading не работает в Firefox и Safari. Но работает, если написать вот так

<img loading="lazy" src="/path/to/img.jpg" />

При этом в Chromium, и производных от него браузерах, все работает независимо от порядка атрибутов.