Почему бы не использовать нативную ленивую загрузку (атрибут изображения loading = "lazy") всегда?

Question

Я пытаюсь разобраться с относительно новым атрибутом img «loading».

Я понимаю, что если img имеет атрибут loading = «lazy», то он сообщит браузерам, которые поддерживают этот атрибут, что он может быть загружен при приближении к окну просмотра.

Так почему бы не всегда устанавливать loading = "lazy"? Те изображения, которые мгновенно появляются на экране, будут отображаться в любом случае, так как они уже находятся внутри области просмотра. Так что в общем случае loading = "lazy" в этом случае игнорируется.

Я также вижу в этой демонстрации https://mathiasbynens.be/demo/img-loading-lazy, что фотографии в верхней части dom имеют загрузку = " набор атрибутов lazy ".

Я получил вышеуказанную ссылку от: https://web.dev/native-lazy-loading/

Заранее спасибо:)

Answer 1

Это подсказка для браузера, что изображение может быть не сразу полезным и видимым и что оно должно расставить приоритеты для других ресурсов. Третье изображение в карусели изображений или изображения, появляющиеся далеко внизу страницы, являются хорошими примерами того, когда этот атрибут полезен.

Слишком ленивые реализации , такие как Firefox, don ' изображения, пока они не прокручиваются в поле зрения. Это заставляет браузер отображать белую область во время загрузки изображения. Это не идеальный пользовательский опыт. Chrome, с другой стороны, загружает изображения 3000–8000px до того, как они появятся на экране, что снова вызывает желание.

Chrome не будет загружать изображения с отложенной загрузкой, даже когда они находятся в области просмотра для вкладок, открытых в фоновом режиме. Это вызвано ограничением Chromium IntersectionObserver и может быть исправлено в будущей версии.

Answer 2

Одна из причин, по которой я не всегда использую ленивую загрузку, заключается в том, что сеть может быть нарушена. В этом случае вы хотите загрузить как можно больше данных при активном соединении, чтобы большая часть страницы была пригодна для использования, когда соединение не работает.