dll.js

Double Lazy Load | dll.js

Double Lazy Load for videos, images and background images. Sourced with ES6+ and strong TypeScript definitions.

Demo

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

npm

npm install dll.js

Base syntax

new 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.

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

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

// lazy loads any items with data-src from the entire page
new 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) ){
    new 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:

var el = document.getElementById('myElement'); //this is a parent
new dll(el, callback)
function callback(){
  console.log('I just finished lazy loading the last element for #myElement')
}

License

MIT License