# @lightsource/lazy-loading

> Lightweight (2.1kb minified) images lazy loading polyfill for browsers that don't support the native attribute. Supports image and picture tags, supports dynamic content (e.g. ajax). Based on Intersection and Mutation Observers. If a browser supports nati

Latest version **2.1.1** (published 2021-12-02) · GPL-2.0-only license · 0 weekly downloads

## Install

```sh
npm install @lightsource/lazy-loading
pnpm add @lightsource/lazy-loading
yarn add @lightsource/lazy-loading
bun add @lightsource/lazy-loading
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2021-12-02 |
| First published | 2020-11-08 |
| Weekly downloads | 0 |
| License | GPL-2.0-only |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | LightSource |
| Maintainers | lightsource |
| Keywords | lazy, loading, images, image |

## Links

- npm: https://www.npmjs.com/package/@lightsource/lazy-loading
- Repository: https://gitlab.com/lightsource/lazy-loading
- Issues: https://gitlab.com/lightsource/lazy-loading/-/issues
- npm.io page: https://npm.io/package/@lightsource/lazy-loading

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.1.1 (latest) — 2021-12-02
- 2.1.0 — 2021-11-22
- 2.0.1 — 2021-11-22
- 2.0.0 — 2021-11-22
- 1.2.0 — 2021-11-10
- 1.1.0 — 2021-11-10
- 1.0.1 — 2021-09-19
- 1.0.0 — 2020-11-08

## README

# Lazy loading

## What is it

Lightweight (2.1kb minified) images lazy loading polyfill for browsers that don't support the native attribute. Supports image and picture tags,
supports dynamic content (e.g. ajax). Based on Intersection and Mutation Observers.
If a browser supports native lazy loading then the script just will put a real source from the data attribute to the
target. Otherwise, will implement lazy loading via IntersectionObserver

## Installation

```
yarn add @lightsource/lazy-loading
```

OR

```
npm install @lightsource/lazy-loading
```

## Example of usage

#### Html structure

An image

```
<img class='lazy-loading' <!-- setup a class, the class name can be changed through settings -->
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" <!-- default stub -->
     data-src="example.com/picture" <!-- real source -->
     alt="Some description"
     data-srcset="example.com/picture 500w, example.com/picture2 1000w" <!-- optional -->
     loading="lazy">
```

OR

A picture

```
<picture>

 <source data-srcset="example.com/picture" <!-- real source -->
         type="image/jpg"> <!-- image's mime type -->

<img class='lazy-loading' <!-- setup a class, the class name can be changed through settings -->
     src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" <!-- default stub -->
     data-src="example.com/picture" <!-- real source -->
     alt="Some description"
     loading="lazy">

</picture>
```

#### JavaScript/Typescript

You can import it like an ordinary npm package, but for the best performance I recommend another way - at the end of a
body tag add belows code :  
(only at the end images are already loaded, also don't use external script to avoid an extra request)

```
<script>
(function () {
... TODO copy code from lazyLoading.min.js
new Images({
 yOffsetToLoading: 500,
 toLoadClass: 'lazy-loading',
 loadedClass: 'lazy-loading--loaded',
 loadedEvent: 'lazy-loading_loaded',
}) // all arguments are optional
}())
</script>
```

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