lazy-blur.js
v0.1.7
Published
Progressive image loader with SVG blur effect
Downloads
23
Readme
lazy-blur.js
A progressive image loader library with SVG blur effect.
Usage
steps:
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}"><!-- lazy-blur__imgS__placeholder --></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