## Usage
In HTML, add an identifier to the element (default selector identified is `lozad` class):
```html
* You can open your network section in dev tools, for see how images are loading
```
All you need to do now is just instantiate Lozad as follows:
```js
const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();
```
or with a DOM `Element` reference:
```js
const el = document.querySelector('img');
const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer.observe();
```
or with custom options:
```js
const observer = lozad('.lozad', {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1, // ratio of element convergence
enableAutoReload: true // it will reload the new image when validating attributes changes
});
observer.observe();
```
Reference:
- [IntersectionObserver options: rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin)
- [IntersectionObserver options: thresholds](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds)
or if you want to give custom function definition to load element:
```js
lozad('.lozad', {
load: function(el) {
console.log('loading element');
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
});
```
If you would like to extend the `loaded` state of elements, you can add the loaded option:
> **Note**: The `"data-loaded"="true"` attribute is used by lozad to determine if an element has been previously loaded.
```js
lozad('.lozad', {
loaded: function(el) {
// Custom implementation on a loaded element
el.classList.add('loaded');
}
});
```
If you want to lazy load dynamically added elements:
```js
const observer = lozad();
observer.observe();
// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well
```
for use with responsive images
```html
picture-01.jpg media="(min-width: 1280px)"
picture-02.jpg media="(min-width: 980px)"
picture-03.jpg media="(min-width: 320px)"
picture-04.jpg media="(min-width: 1280px)"
picture-05.jpg media="(min-width: 980px)"
picture-06.jpg media="(min-width: 320px)"
picture-07.jpg media="(min-width: 1280px)"
picture-08.jpg media="(min-width: 980px)"
picture-09.jpg media="(min-width: 320px)"
* You can open your network section in dev tools, for see how background-images are loading
Single Background Image
Multiple Background Images
Check the console to see that these are indeed separate images.
Multiple Background Images
Fallback Method ( where the first / foremost image fails )
Check the console to see that the first image is failed to load.
Responsive Background Images set
Change a device pixel ratio with devtools and check the console to see which image dimension was loaded
video courtesy of Big Buck Bunny.
normal video example