Native Lazy Loading

lazy-loading-feature.ts

export default class LazyLoadingFeature {
  supported = false

  detect () {
    if (typeof HTMLImageElement === 'undefined') return

    this.supported = HTMLImageElement && 'loading' in HTMLImageElement.prototype
  }

  polyfill () {
    if (this.supported) return

    // Dynamically import the lazysizes library
    import(/* webpackChunkName: "lazysizes" */ 'lazysizes')
      .catch(err => console.log('failed to load lazysizes module', err))
  }
}

native-lazy.ts

import LazyLoadingFeature from 'src/helpers/lazy-loading-feature'
import { DirectiveBinding } from 'vue/types/options'

const lazyLoadingFeature = new LazyLoadingFeature()

lazyLoadingFeature.detect()
lazyLoadingFeature.polyfill()

const directive = {
  prepareElem (el: HTMLImageElement, binding: DirectiveBinding) { // no hook func
    // set src attribute for the bound `img` element
    if (lazyLoadingFeature.supported && el.dataset.src) {
      el.src = el.dataset.src
      el.classList.add('lazyloaded')
      el.classList.remove('lazyload')

      if (!binding.value?.error) return
      // set pixel on error / failed to load image
      el.onerror = () => {
        el.src = binding.value.error
      }
    }
  },
  bind (el: HTMLImageElement, binding: DirectiveBinding) {
    // support lazy loading for background image
    if (binding.arg === 'background-image' && binding.value) el.style.backgroundImage = `url("${binding.value}")`

    directive.prepareElem(el, binding)
  },
  update (el: HTMLImageElement, binding: DirectiveBinding) {
    directive.prepareElem(el, binding)
  }
}

export default directive