How to use the lazysizes.init function in lazysizes

To help you get started, we’ve selected a few lazysizes examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github wellcometrust / wellcomecollection.org / common / views / components / DefaultPageLayout / DefaultPageLayout.js View on Github external
// $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
      ]
github wellcometrust / wellcomecollection.org / common / views / pages / _app.js View on Github external
}

    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);
github wellcometrust / wellcomecollection.org / client / js / app.js View on Github external
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');
github moulapp / moul / assets / moul.js View on Github external
useEffect(() => {
		window.addEventListener('optimizedResize', handleResize)
		lazySizes.init()
		ps(cid)

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

lazysizes

High performance (jankfree) lazy loader for images (including responsive images), iframes and scripts (widgets).

MIT
Latest version published 3 years ago

Package Health Score

62 / 100
Full package analysis

Popular lazysizes functions