1.0.0-alpha2 • Published 3 years ago
@thednp/dll v1.0.0-alpha2
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/dllBase 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>withdata-srcattribute - 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
1.0.10
1 year ago
1.0.9
2 years ago
1.0.8
3 years ago
1.0.7
3 years ago
1.0.6
3 years ago
1.0.1
3 years ago
1.0.0
3 years ago
1.0.0-alpha2
3 years ago
1.0.0-alpha3
3 years ago
1.0.5
3 years ago
1.0.4
3 years ago
1.0.3
3 years ago
1.0.0-alpha1
4 years ago