README
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 havedata-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>
withdata-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:
```js
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')
}