pinafore/routes/_components/LazyImage.html

<div class="lazy-image"
     style="width: {{width}}px; height: {{height}}px; background: {{background}};">
  {{#if displaySrc}}
    <img
      class="{{hidden ? 'hidden' : ''}} {{className || ''}}"
      aria-hidden={{ariaHidden || ''}}
      alt={{alt || ''}}
      title={{alt || ''}}
      src={{displaySrc}}
      :width
      :height
    />
  {{/if}}
</div>
<style>
  .lazy-image {
    overflow: hidden;
  }
  .lazy-image img {
    transition: opacity 0.2s linear;
  }
</style>
<script>
  import { mark, stop } from '../_utils/marks'

  export default {
    oncreate () {
      mark('LazyImage oncreate()')
      let img = new Image()
      let { src } = this.get()
      let { fallback } = this.get()
      img.onload = () => {
        requestAnimationFrame(() => {
          this.set({
            displaySrc: src,
            hidden: true
          })
          requestAnimationFrame(() => {
            this.set({hidden: false})
          })
        })
      }
      img.onerror = () => {
        this.set({displaySrc: fallback})
      }
      img.src = src
      stop('LazyImage oncreate()')
    },
    data: () => ({
      displaySrc: void 0,
      hidden: false,
      ariaHidden: false
    })
  }
</script>