Loadeer.js
Tiny, performant, SEO-friendly lazy loading library
` and `` tags. It supports the `srcset` and `sizes` attributes, as well as the `loading` attribute. It is also possible to use the `data` attributes instead of the native attributes.
### Key Features
- 🍃 **Zero dependencies**: 1 kB minified & gzipped
- 🏎 **Auto initialize**: with the `init` script attribute
- 🪄 **Sizing**: Automatically calculates the `sizes` attribute
- 🎀 **Native**: Use [native `loading="lazy"`](#native-lazy-loading) if you prefer
- 🔧 **Customizable**: Use `data` attributes for image sources
- 🎟 **``**: Supports multiple image formats
- 🔍 **SEO-friendly**: Detects e.g. Google Bot and preloads all images
## Installation
Loadeer.js can be used without a build step. Simply load it from a CDN:
```html
```
- The `defer` attribute makes the script execute after HTML content is parsed.
- The `init` attribute tells Loadeer.js to automatically initialize and watch all elements that have a `data-lazyload` attribute.
### Manual Initialization
If you don't want the auto initialize, remove the `init` attribute and move the scripts to end of ``:
```html
```
Or, use the ES module build by installing the [`loadeer` npm package](https://www.npmjs.com/package/loadeer):
```js
import Loadeer from 'loadeer'
const loadeer = new Loadeer()
loadeer.observe()
```
### Production CDN URLs
The short CDN URLs are meant for prototyping. For production usage, use a fully resolved CDN URL to avoid resolving and redirect cost:
- Global build: https://unpkg.com/loadeer@2.1.3/dist/loadeer.iife.js
- Exposes `Loadeer` global property, supports auto initializing
- ESM build: https://unpkg.com/loadeer@2.1.3/dist/loadeer.es.js
- Must be used with ` 