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.
Install the component using npm.
npm install lazy-image-webcomponent --save
Add to main.js
import {lazyImages} from './lazyImages.js'
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({});
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,
});