lazy-ww

LazyWW

Библиотека для отложенной загрузки img, video, iframe, scripts.

Installation

=========================

npm install --save lazy-ww

Initialize script

=========================

import LazyWW from 'lazy-ww'
LazyWW(props)

Props

=========================

Prop	Type	Default	Description
lazyClass	String	lazy	Класс, который отслеживает библиотека.
loadingClass	String	loading	Класс, который будет накинут на элемент во время выполнения скрипта.
loadedClass	String	loaded	Класс, который будет накинут после загрузки ресурса.
distanceToVisibleArea	Number	600	Дистанция от нижней видимой области в px, после преодоления которой скрипт отработает.
breakpoints	Object	{sm: 639, md: 1023, lg: 1919}	Параметры минимальной ширины экрана, которые применятся для медиа запросов в .
placeholderSrc	String	null	Можно задать стандартный placeholder для всех картинок, который будет отображен до отработки скрипта.

Data attributes

=========================

Attr	Description
data-src	Ссылка на оригинал ресурса
data-srcset	Список изображений, среди которых браузер выберет нужное (необходимо указать атрибут sizes)
data-source-mobile	Ссылка на изображение для sm breakpoints
data-source-tablet	Ссылка на изображение для md breakpoints
data-source-desktop	Ссылка на изображение для lg breakpoints
data-source-xl	Ссылка на изображение для xl breakpoints

Об API

========================

Обычно вам нужно будет использовать только API разметки. Добавьте class lazy ко всем img, video и iframe элементам, для которых планируется отложенная загрузка. Вместо src или srcset атрибутов, используйте data-src или data-srcset атрибуты:

<img data-src="image.jpg" class="lazy" />
<!-- Результат: -->
<img src="image.jpg" class="loaded" />

<!-- ////////////////////////////////////// -->

<video data-src="video-file.ogg" autoplay class="lazy"></video>
<!-- Результат: -->
<video src="video-file.ogg" autoplay class="loaded"></video>

<!-- ////////////////////////////////////// -->

<!-- retina optimized image: -->
<img data-src="image.jpg"
     data-srcset="responsive-image1.jpg 320w, 
                  responsive-image2.jpg 480, 
                  responsive-image3.jpg 800w"  
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     class="lazy" />
<!-- Результат: -->
<img srcset="responsive-image1.jpg 320w,
             responsive-image2.jpg 480w,
             responsive-image3.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="image.jpg">

Комбинация sourse с data-src

=========================

<!-- responsive example: -->
<img 
	src="placeholder.jpg" 
	data-src="image.jpg"
    srcset="responsive-image1.jpg 320w,
             responsive-image2.jpg 480w,
             responsive-image3.jpg 800w"
    sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
	data-source-mobile="responsive-image1.webp"
	data-source-tablet="responsive-image2.webp"
	data-source-desktop="responsive-image3.webp"
	data-source-xl="responsive-image4.webp"
	class="lazy" />
<!-- Результат: -->
<picture>
  <source srcset="responsive-image1.webp" media="(max-width: 639px)" type="image/webp">
  <source srcset="responsive-image2.webp" media="(max-width: 1023px)" type="image/webp">
  <source srcset="responsive-image3.webp" media="(max-width: 1919px)" type="image/webp">
  <source srcset="responsive-image4.webp" type="image/webp">

  <img srcset="responsive-image1.jpg 320w,
               responsive-image2.jpg 480w,
               responsive-image3.jpg 800w"
       sizes="(max-width: 320px) 280px,
              (max-width: 480px) 440px,
              800px"
            src="image.jpg">
</picture>