How to use lozad - 10 common examples

/*jslint browser: true, white: true, plusplus: true, regexp: true, indent: 4, maxerr: 50, es5: true */
/*jshint multistr: true, latedef: nofunc */
/*global jQuery, $, Swiper*/

import $ from 'jquery';
import Swiper from "swiper";
import screen from './lib';
import lozad from "lozad";

// lazy loads elements with default selector as ".lozad"
const observer = lozad();
observer.observe();

var macSwiper,
    screenSliderTop,
    macNavigation = $('.controls-nav'),
    screenThumbsNavigation = $('.screen-slider-thumbs');
$(document).ready(function() {
    $('body').show();
    $('#msg').hide();
    window.scrollTo(window.scrollX, window.scrollY + 1);
    window.scrollTo(window.scrollX, window.scrollY - 1);
});

function stopMacVideos() {
    'use strict';
    $('.mac-wrap .swiper-slide video').each(function () {

componentDidMount() {
    // lazy loads elements with default selector as '.lozad'
    // Prevent WebPack build fail
    if (isBrowser()) {
      // Initialize library
      const observer = lozad('.lozad', {
        load(el) {
          /* eslint-disable no-param-reassign */

          el.src = el.dataset.src;
          el.onload = () => {
            el.classList.add('animated');
            el.classList.add('fadeIn');
          };
          /* eslint-enable */
        },
      });
      observer.observe();
    }
  }

mounted() {
    // handle slider with swipe and transitions with Glide.js
    // https://glidejs.com/docs/
    const glide = new Glide(this.$refs.glide, this.sliderOptions);
    glide.on("run", () => {
      this.go(glide.index);
    });
    glide.mount();
    this.glide = glide;
    // handle lazy load for big images with lozad
    // https://apoorv.pro/lozad.js/
    const observer = lozad(".sf-gallery__big-image");
    observer.observe();
  },

connect() {
    super.connect();
    lozad(this.element, {
      load: async () => {
        this.element.classList.add('loaded');
        const {data} = await this.getComments();
        const pictures = uniq(filter(map(data.comments, 'user.picture'))).reverse();
        this.element.innerHTML = '';
        pictures.slice(0, limit).forEach((picture, index) => {
          if (!picture) return;
          const div = document.createElement('DIV');
          div.style.backgroundImage = `url('${picture}')`;
          div.classList.add('comments-counter-avatars-item');
          div.style.transitionDelay = `${(limit - index) * 20}ms`;
          this.element.appendChild(div);
        });
        // todo limit waiting time before showing images
        imagesLoaded(this.element, {background: '.comments-counter-avatars-item'}, () => {
          this.reflow();

mounted() {
      const { $el } = this

      if ($el.dataset.src || $el.dataset.srcset) {
        lozad($el, {
          loaded: el => {
            el.addEventListener(
              'load',
              () => {
                el.setAttribute('data-lazy-loaded', '')
                el.addEventListener(
                  'transitionend',
                  () => {
                    el.classList.remove(styles.blendIn)
                  },
                  { once: true }
                )
              },
              { once: true }
            )
          }

import 'intersection-observer';
import lozad from 'lozad';

const observer = lozad();
observer.observe();

mounted() {
            this.$refs.image.addEventListener('load', this.doneLoading())

            this.$once('hook:destroyed', () => {
                if (this.$refs.image) {
                    this.$refs.image.removeEventListener('load', this.doneLoading())
                }
            })

            this.lozad = lozad(this.$refs.image)
            
            this.lozad.observe()
        },
    }

useEffect(() => {
    if (props.lazy !== false && ref) {
      const observer = lozad(ref.current, {
        loaded: () => {
          setLoaded(true);
        },
      });
      observer.observe();
    } else {
      setLoaded(true);
    }
  }, [props.src]);

mounted() {
    if (this.lazy !== false) {
      const vm = this;
      const observer = lozad(vm.$refs.imgLazy, {
        loaded: function() {
          vm.loaded = true;
        }
      });
      observer.observe();
    } else {
      this.loaded = true;
    }
  }
};

componentDidMount() {
    const observer = lozad();
    observer.observe();
  }