Pinafore-Web-Client-Frontend/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>