Momkai.com

I'm Lazy

A lazy loading module that uses Intersection Observer to load your media elements

Small utilitarian script to lazy load your media elements using Intersection Observer.

Instructions

import ImLazy from 'imlazy'

const ImLazy = new ImLazy()

document.addEventListener('DOMContentLoaded', () => {
  ImLazy.init()
})

Your html should then contain:

video element

 <video data-imlazy autoPlay loop muted playsinline webkit-playsinline poster="poster.jpg">

    <source data-src="video.webm" type="video/webm">
    <source data-src="video.mp4" type="video/mp4">

    <!-- fallback -->
    <img data-src="fallback-small.jpg" data-srcset="fallback-large.jpg 980w" alt="">
</video>

img and picture elements

<!-- image -->
<img data-imlazy data-src="image.jpg" alt="" />

<!-- picture -->
<picture data-imlazy>
    <source media="(max-width: 640px)" data-srcset="image-small.jpg">
    <source media="(min-width: 640px)" data-srcset="image-large.jpg">

    <img data-src="image-large.jpg" alt="">
</picture>

Available options

const ImLazy = new ImLazy(options = {
    selector: `[data-imlazy]`,
    properties: { root: null, rootMargin: `0px 0px`, threshold: 0 },
    domElement: document
})

• selector You can change the selector of your elements to something you are pleased with
• properties You can set overwrite the properties of Intersection Observer.
• domElement By default you can observe element in the document but you can restrict this to a different element you would like to use the lazy loading.

Notes

• Be aware that using this script in production and depending on your support requirements you might need to have Intersection Observer polyfill from W3C.
• This script assumes that you deal with transpiling javascript yourself using your preference tool