Skip to content
/ dll Public

Double Lazy Load for videos, images and background images.

License

Notifications You must be signed in to change notification settings

thednp/dll

Repository files navigation

Double Lazy Load

ci NPM Version NPM Downloads jsDeliver typescript version eslint version prettier version vite version

Double Lazy Load for videos, images and background images. Sourced with Typescript.

Demo

Right here. Also provides some tips on how to use.

npm

npm install @thednp/dll

Base syntax

import DLL from '@thednp/dll';

DLL('selector',callback);

What it does

  • Integrates nicelly into your projects and provides build tools
  • Do lazy loading for an element that is subject to lazy load via data-src, or
  • Do to all child items of a given element
  • Do backgroundImage to elements other than <img> if they have data-src attribute.
  • Do callback when load event is triggered for one element, or for the last child element of a given parent.
  • Do lazy loading for <video> elements having <source> with data-src attribute
  • Do lazy load for all items having data-src attribute.

Works with

Any valid selector or no selector.

import DLL from '@thednp/dll';

// lazy loads an element with a given class and it's children if any have data-src
DLL('.uniqueClassName', callBack); 

// lazy loads an element with a given ID and it's children if any have data-src
DLL('#uniqueID', callBack); 

// lazy loads any items with data-src from the entire page
DLL(); 

If you want to lazy load on scroll, with isElementInViewport you can do:

// your target element
var el = document.getElementById('myItem');

// the callback
function callback(){
  //do some stuff when loading finished
}

// the scroll eventHandler
function scrollHandler(){
  if ( isElementInViewport(el) ){
    DLL(el, callback)
  }
  window.removeEventListener('scroll', scrollHandler, false);
}
window.addEventListener('scroll', scrollHandler, false);

A nasty example

Lazy load a parent <div id="myElement" data-src="..image.png"> with many elements inside subject to dll.js object:

DLL(document.getElementById('myElement'), callback)
function callback(){
  console.log('I just finished lazy loading the last element for #myElement')
}

License

MIT License