Double Lazy Load

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