How to use lazysizes - 7 common examples

// $FlowFixMe
    const lazysizes = require('lazysizes');
    // $FlowFixMe
    const FontFaceObserver = require('fontfaceobserver');

    const WB = new FontFaceObserver('Wellcome Bold Web', {weight: 'bold'});
    const HNL = new FontFaceObserver('Helvetica Neue Light Web');
    const HNM = new FontFaceObserver('Helvetica Neue Medium Web');
    const LR = new FontFaceObserver('Lettera Regular Web');

    Promise.all([WB.load(), HNL.load(), HNM.load(), LR.load()]).then(() => {
      // $FlowFixMe
      document.documentElement.classList.add('fonts-loaded');
    }).catch(console.log);

    lazysizes.init();

    // $FlowFixMe
    document.documentElement.classList.add('enhanced');

    Raven.config('https://f756b8d4b492473782987a054aa9a347@sentry.io/133634', {
      shouldSendCallback(data) {
        const oldSafari = /^.*Version\/[0-8].*Safari.*$/;
        const bingPreview = /^.*BingPreview.*$/;

        return ![oldSafari, bingPreview].some(r => r.test(window.navigator.userAgent));
      },
      whitelistUrls: [/wellcomecollection\.org/],
      ignoreErrors: [
        /Blocked a frame with origin/,
        /document\.getElementsByClassName\.ToString/ // https://github.com/SamsungInternet/support/issues/56
      ]

}

    try {
      ReactGA.set({ dimension5: JSON.stringify(toggles) });
    } catch (error) {
      // don't do anything
    }

    ReactGA.pageview(`${window.location.pathname}${window.location.search}`);
    engagement = setTimeout(triggerEngagement, 10000);
    Router.events.on('routeChangeStart', trackRouteChangeStart);
    Router.events.on('routeChangeComplete', trackRouteChangeComplete);

    // TODO: Is there a better implementation of this
    const lazysizes = require('lazysizes');
    lazysizes.init();

    // Fonts
    const FontFaceObserver = require('fontfaceobserver');

    const WB = new FontFaceObserver('Wellcome Bold Web', { weight: 'bold' });
    const HNL = new FontFaceObserver('Helvetica Neue Light Web');
    const HNM = new FontFaceObserver('Helvetica Neue Medium Web');
    const LR = new FontFaceObserver('Lettera Regular Web');

    Promise.all([WB.load(), HNL.load(), HNM.load(), LR.load()])
      .then(() => {
        if (document.documentElement) {
          document.documentElement.classList.add('fonts-loaded');
        }
      })
      .catch(console.log);

const init = () => {
  polyfills.init();

  nodeList(document.querySelectorAll('.async-content')).forEach((el) => {
    asynContent(el, dispatch);
  });

  lazysizes.init();
  instagram.init();
  tracking.init();
  fontObserver.init();

  const burgerEl = document.querySelector('.js-header-burger');
  const openingHoursEls = document.querySelectorAll('.js-opening-hours');
  const wobblyEdgeEls = document.querySelectorAll('.js-wobbly-edge');
  const stickyEls = document.querySelectorAll('.js-sticky');
  const articleGalleries = document.querySelectorAll('.article .js-image-gallery');
  const basicPageGalleries = document.querySelectorAll('.basic-body .js-image-gallery');
  const mainEl = document.getElementById('main');
  const cohortButtons = document.querySelectorAll('.js-cohort-button');
  const gifVideoEls = document.querySelectorAll('.js-gif-video');
  const sortSearchEls = document.querySelectorAll('.js-sort-search');
  const backToTopEl = document.querySelector('.js-back-to-top');
  const toggleShowHideEls = document.querySelectorAll('.js-show-hide');

useEffect(() => {
		window.addEventListener('optimizedResize', handleResize)
		lazySizes.init()
		ps(cid)

		return () => {
			window.removeEventListener('optimizedResize', handleResize)
		}
	})

ngAfterViewInit(): void {
		lazySizes.init()
	}

import 'lazysizes/plugins/respimg/ls.respimg';
import 'lazysizes/plugins/object-fit/ls.object-fit';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';

/**
 * configuration for lazysizes
 */

const stateClasses = {
	lazyload: 'js-a-image--lazyload',
	pending: 'state-a-image__image--pending',
	loading: 'state-a-image__image--loading',
	loaded: 'state-a-image__image--loaded',
};

Object.assign(lazySizes.cfg, {
	preloadAfterLoad: false,
	loadMode: 1,
	expand: 10,
	expFactor: 1.7,
	lazyClass: stateClasses.lazyload,
	preloadClass: stateClasses.pending,
	loadingClass: stateClasses.loading,
	loadedClass: stateClasses.loaded,
	debug: true,
});

import __assign from 'core-js/features/object/assign';

Object.assign = Object.assign || __assign;

/**
 * configuration for lazysizes
 */

enum States {
	Lazyload = 'js-a-image--lazyload',
	Pending = 'state-a-image__image--pending',
	Loading = 'state-a-image__image--loading',
	Loaded = 'state-a-image__image--loaded',
}

Object.assign(lazySizes.cfg, {
	preloadAfterLoad: false,
	loadMode: 1,
	expand: 10,
	expFactor: 1.7,
	lazyClass: States.Lazyload,
	preloadClass: States.Pending,
	loadingClass: States.Loading,
	loadedClass: States.Loaded,
	debug: true,
});