lazy-ww v0.1.2
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>