# lazy-ww

> Simple lazy loading

Latest version **0.1.2** (published 2022-08-29) · ISC license · 0 weekly downloads

## Install

```sh
npm install lazy-ww
pnpm add lazy-ww
yarn add lazy-ww
bun add lazy-ww
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.2 |
| Published | 2022-08-29 |
| First published | 2022-08-10 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 31.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vadim B |
| Maintainers | ww-vadim |
| Keywords | load, lazy |

## Links

- npm: https://www.npmjs.com/package/lazy-ww
- Repository: https://bitbucket.org/widewebpro/lazy-load-ww
- Homepage: https://bitbucket.org/widewebpro/lazy-load-ww#readme
- Issues: https://bitbucket.org/widewebpro/lazy-load-ww/issues
- npm.io page: https://npm.io/package/lazy-ww

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.5.8
- [eventlistener](https://npm.io/package/eventlistener.md) 0.0.1

## Recent versions

- 0.1.2 (latest) — 2022-08-29
- 0.1.113 — 2022-08-11
- 0.1.112 — 2022-08-11
- 0.1.111 — 2022-08-11
- 0.1.11 — 2022-08-11
- 0.1.1 — 2022-08-10
- 0.1.0 — 2022-08-10

## README

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

## Installation
=========================
```
npm install --save lazy-ww
```

## Initialize script
=========================
```javascript
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}` | Параметры минимальной ширины экрана, которые применятся для медиа запросов в <source>. |
| 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`` атрибуты:

```html
<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``
=========================
```html
<!-- 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>
```

---
_Source: https://npm.io/package/lazy-ww · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._