lazy-image-webcomponent/README.md

This component is a simple method to lazy load images from a source set similar to responsive images. The component calculates the rendered image width and then fetches the optimal image.

# lazy-image-webcomponent
This component offers a simple method to lazy load images from a source set similar to responsive images. The component calculates it's rendered width and then fetches the the image with closest dimensions.


## Installation

### Node Modules
Install the component using npm.
```
npm install lazy-image-webcomponent --save
```
Add to main.js
```
import {lazyImages} from './lazyImages.js'
```

## Init
We will use the Intersection Observer API to track all individual components and check if they reach the viewport.

```
<lazy-image visible="false" srcset="0 images/img-1-placeholder.jpeg, 400 images/img-1-400.jpeg, 600 images/img-1-600.jpeg, 800 images/img-1-800.jpeg, 1000 images/img-1-1000.jpeg, 1200 images/img-1-1200.jpeg, 1400 images/img-1-1400.jpeg"></lazy-image>
```

```
lazyImages({});
```


## Init with sections
By tracking sections instead of indvidual images we can improve .

```
<lazy-image-section>
    <lazy-image visible="false" srcset="0 images/img-1-placeholder.jpeg, 400 images/img-1-400.jpeg, 600 images/img-1-600.jpeg, 800 images/img-1-800.jpeg, 1000 images/img-1-1000.jpeg, 1200 images/img-1-1200.jpeg, 1400 images/img-1-1400.jpeg"></lazy-image>
    <div class="spacer"></div>
    <lazy-image visible="false" srcset="0 images/img-2-placeholder.jpeg, 400 images/img-2-400.jpeg, 600 images/img-2-600.jpeg, 800 images/img-2-800.jpeg, 1000 images/img-2-1000.jpeg, 1200 images/img-2-1200.jpeg, 1400 images/img-2-1400.jpeg"></lazy-image>
</lazy-image-section>
<lazy-image-section>
    <lazy-image visible="false" srcset="0 images/img-3-placeholder.jpeg, 400 images/img-3-400.jpeg, 600 images/img-3-600.jpeg, 800 images/img-3-800.jpeg, 1000 images/img-3-1000.jpeg, 1200 images/img-3-1200.jpeg, 1400 images/img-3-1400.jpeg"></lazy-image>
</lazy-image-section>
```

```
lazyImages({
    sections: true,
});
```