LazyImageComponent

LazyImageComponent loads an image into an element when it comes inview.

LazyImageComponentOptions

Example

Scroll down to view the lazyimage.

(scroll down)

lazyimage using img lazyimage-src

lazyimage using div lazyimage-background-image

elements that are set to `display: none` should not load

HTML

<div class="spacer"></div>

<div class="container">
  <h2>lazyimage using img lazyimage-src</h2>
  <img class="lazyimage"
      style="width: 400px; height: 400px"
      lazyimage-src="https://lh3.googleusercontent.com/dmQfcAxbbvf-_tM_gKPX4z07wl2YqG3qwAoioszQFa4izxL66B7FGXE3qRvLuBFGW8zu16ya6EKmbUePU9Qj=pp-w{width}">

  <h2>lazyimage using div lazyimage-background-image</h2>
  <div class="lazyimage"
      style="width: 100%; max-width: 400px; height: 400px; background-size: cover"
      lazyimage-background-image="https://lh3.googleusercontent.com/qbXuwPuwwfoETse9LsMRbxYDOt3iaiHZkoTGwMhDsgCsMgk-wYcWqDdzjckMwFdI8Ck9dfCM63k5vL1tWoKy=pp-w{width}"></div>

  <h2>elements that are set to `display: none` should not load</h2>
  <img class="lazyimage"
      style="display: none"
      lazyimage-src="https://lh3.googleusercontent.com/dmQfcAxbbvf-_tM_gKPX4z07wl2YqG3qwAoioszQFa4izxL66B7FGXE3qRvLuBFGW8zu16ya6EKmbUePU9Qj=pp-w{width}">
  <div class="lazyimage"
      style="display: none"
      lazyimage-background-image="https://lh3.googleusercontent.com/qbXuwPuwwfoETse9LsMRbxYDOt3iaiHZkoTGwMhDsgCsMgk-wYcWqDdzjckMwFdI8Ck9dfCM63k5vL1tWoKy=pp-w{width}"></div>
</div>

<div class="spacer"></div>

CSS

.lazyimage[lazyimage-background-image],
.lazyimage[lazyimage-src] {
  opacity: 0;
  transition: opacity 5s ease;
}
.lazyimage[lazyimage-loaded="true"] {
  opacity: 1;
}

.spacer {
  min-height: 80vh;
}

JavaScript

import {Registry} from 'airkit2';
import {LazyImageComponent} from 'airkit2/lazyimage';


const app = new Registry();
app.register('lazyimage', LazyImageComponent, {
  inviewClass: 'lazyimage--visible',
  loadedClass: 'lazyimage--loaded',
});
document.addEventListener('DOMContentLoaded', () => {
  app.run();
});