easy-lazy
v1.0.3
Published
A simple image lazy loading script
Downloads
6
Maintainers
Readme
Easy Lazy
Based on Robin Osborne's lazy loading technique. This is an ES6-updated alternative with configuration options.
Use
<img src="placeholder.png" data-src="/path/to/image.png" class="js-lazy" />
const lazy = Lazy({
className: 'js-lazy',
attrName: 'data-src'
})
lazy.init()
// Or use default configuration...
Lazy().init()
Configuration
Lazy() accepts a configuration object with the following properties.
className (default: 'js-lazy')
The class name of the images to lazy load.
attrSrc (default: 'data-src')
The attribute where the image src lives.
Transition
Adding a transition is easy using the .loaded
class.
Here is a simple fade in:
.js-lazy {
opacity: 0;
transition: opacity 200ms;
}
.js-lazy.loaded {
opacity: 1;
}