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>