lazy-blur.js
A progressive image loader library with SVG blur effect.
Usage
steps:
- install
- image setup
- initialize library
Install
You could download this script directly
or install via npm.
npm install lazy-blur.js
<script src="lazy-blur.min.js"></script>
Image setup
-
requirement
imgRatio
, img-width / img-height, unit: %
imgS.url
imgL.url
-
html markup
<figure class="image">
<div class="lazy-blur">
<div style="padding-bottom: ${imgRatio}"></div>
<img src="${imgS.url}" data-src="${imgL.url}" class="lazy-blur__imgS"/>
<noscript><img src="${imgL.url}"/></noscript>
</div>
<figcaption>something~</figcaption>
</figure>
-
css style
.lazy-blur {
position: relative;
overflow: hidden;
}
.lazy-blur img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.lazy-blur__imgL {
opacity: 0;
transition: opacity .3s;
}
.done > .lazy-blur__imgL {
opacity: 1;
}
initialize library
new LazyBlur();
Options
All options are optional.
new LazyBlur({
imgSQuery: ,
imgLClass: ,
filterSelector: ,
getImgLSrc: ,
onLoad: ,
blurSize: ,
scrollThreshold: ,
eventType:
});
Options | Type | Default | Description |
---|
imgSQuery | String | '.lazy-blur__imgS' | query selector of small images. used in document.querySelectorAll . |
imgLClass | String | 'lazy-blur__imgL' | class name of large images loaded by lazy-blur.js. |
eventType | String | 'scroll' | The event to active loading large images. optional: 'scroll' , 'click' , 'mouseenter' |
blurSize | Number | 20 | value of svg gaussian blur filter. larger is more blurred. |
scrollThreshold | Number | 50 | distance of scroll threshold (buffer), unit: px |
filterSelector | String | 'html.svg *:not(.done) > ' + opt.imgSQuery | css selector for small images with SVG filter. |
getImgLSrc | Function | function (imgS) { return imgS.getAttribute('data-src'); } | function for getting large image's source url. |
onLoad | Function | function (imgS) { imgS.parentElement.className += ' done '; } | callback for large image loaded. |
Browser support
License
MIT. © 2015 Rplus