LazyLoad изображений браузерах

Категория: JavaScript

О ленивой загрузке изображений в браузерах. Что использовать? Нативный способ (через атрибут loading="lazy") или старый добрый JavaScript.

Атрибут loading="lazy"

В Chrome 76 реализовали ленивую загрузку изображений/iframe через атрибут loading="lazy".

<img src="big-image.png" loading="lazy" alt="A Big Image" />

Это отличная инициатива, но.. 

Браузер сам решает когда загружать lazy-изображения и часто загружает ненужные картинки до того как пользователь прокрутит до них.

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

Из-за этой особенности все еще остаются актуальными JavaScript библиотеки для ленивой подгрузки изображений.

Проверка поддерживает ли браузер loading="lazy":

if ('loading' in HTMLImageElement.prototype) { 
    console.log('Браузер поддерживает loading');
} else {
    // @note Можно подключить полифилл или JavaScript-библиотеку
    // @see https://github.com/mfranzke/loading-attribute-polyfill
}



Поддержка браузерами loading="lazy" в сентябре 2020 года

JavaScript Libraries

JavaScript библиотеки для ленивой загрузки изображений.

LazySizes

Библиотека LazySizes 5.2.2 весит ~3.6kb в gzip и набрала ☆14k на github.

Картинки подгружаются только когда они приближаются к видимой области экрана.

Пример использования:

<img data-src="big-image.jpg" class="lazyload" />

Github: https://github.com/aFarkas/lazysizes

CDN: https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js


#lazyload, #loading lazy, #browser, #javascript

категория: JavaScript