index.js

import { h, Component } from 'preact';
import style from './style';

export default class LazyImage extends Component {

  render({ image }) {

    let style = { backgroundImage: 'url(' + image.base64 + ')' };

    return (
      <div class="lazy-image" style={style}>
        <InnerImage imageUrl={image.imageUrl} />
      </div>
    );
  }
}

class InnerImage extends Component {

  setOpacity() {
    var promise = new Promise((resolve, reject) => {
      setTimeout(function() {
        resolve();
      }, 100);
    }).then(() => {
      this.setState({ style: { opacity: 1 } });
    });
  }

	render({ imageUrl }, { imgSource='', my='', style='' }) {

    if (imgSource === '') {
      fetch(imageUrl)
        .then(response => response.blob())
        .then(blob => window.URL.createObjectURL(blob))
        .then(imgSource => {
          this.setState({ imgSource });
          this.setOpacity();
        });
    }

    return (
      <img class="fade-in" src={imgSource} style={style} />
    );
	}
}

Preactjs Lazy Image

Trying to lazy load images.

style.scss

.lazy-image {
  background-repeat: no-repeat;
  background-size: 300px auto;
  width: 300px;
  float: left;
  margin-left: 5px;
}

.lazy-image img {
  opacity: 0;
  width: 300px;
}

.fade-in {
  transition: opacity 1500ms;
}