dll.js

Double Lazy Load | dll.js

Double Lazy Load for images and background images.

CDN

Thanks to jsdelivr, we have CDN link here.

npm

npm install dll.js

Demo

Right here

Base syntax

new dll('selector',callback);

What it does

• 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 load for all items having data-src attribute.

Works with

Any valid selector or no selector.

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

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

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

Other examples

If your script is in your site head, you should do this

window.addEventListener('load', loadFunctionExample, false);
function loadFunctionExample(){
	new dll('[data-src]', myFunction);
}

If you want to lazy load on scroll

window.addEventListener('scroll', scrollExample, false);
	function scrollExample(){
		var el = document.getElementById('myItem');
		if ( elementInViewport(el) ){
			new dll(el, callback)
		}
		function callback(){
			//do some stuff when loading finished
		}
	}

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