Wix Lazy Image Loading Custom Element

wix-lazy-image.js

// Add this script as Public/custom-elements/wix-lazy-image.js (yes, create a folder called custom-elements)
// In your Wix page, add the Custom Element, choose Corvid file and select the file which you saved in above step.
// Now set Tag Name as lazy-image and save. Now, press Set Attributes and add a field called src with the correct URL of image. 

const addLazyScript = () => {
    const script = document.createElement('script');
    script.src = 'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    script.async = true;
    return script;
}

const createImg = () => {
  const img = document.createElement('img');
  img.className = 'lazyload';
  img.style.width = '100%';
  img.style.height = '100%';
  img.style.position = 'fixed';
  return img;
}

class LazyImage extends HTMLElement {

  constructor() {
    super();
    this.img = createImg();
  }

  connectedCallback() {
    this.appendChild(addLazyScript());
    this.appendChild(this.img);
  }

  attributeChangedCallback(name, oldValue, newValue) {
    if (name === 'src') {
        this.img.dataset.src = newValue;
    }
  }

  static get observedAttributes() {
    return ['src'];
  }

}

customElements.define('lazy-image', LazyImage);