Make images load lazily, with a blur-in effect.

Usage

Style

Add the default style below to your CSS.

.img-blur-in {
    -webkit-filter: blur(32px);
    -moz-filter: blur(32px);
    -ms-filter: blur(32px);
    -o-filter: blur(32px);
    filter: blur(32px);
    -webkit-transition: all ease .2s;
    -moz-transition: all ease .2s;
    -ms-transition: all ease .2s;
    -o-transition: all ease .2s;
    transition: all ease .2s;
}Copy the code

Notice If you need no CSS effects, just remove the properties. Lazy loading of images can be accomplished as well via this library.

HTML

Give image tags the CSS class name. Here are three different choices:

<img class="img-blur-in" src="small.jpg" alt="blur until the image is loaded">
<img class="img-blur-in" src="small.jpg" data-src="large.jpg" alt="blur until the large image is loaded">
<img class="img-blur-in" src="small.jpg" data-src="large.jpg" data-lazy="true" alt="blur until the image is into the viewport and the large image is loaded">Copy the code

JavaScript

Inject or import img-blur-in.

inject

<script src="//path/to/img-blur-in.js"></script>Copy the code

import

npm install --save img-blur-inCopy the code
/* index.js */
require('img-blur-in')Copy the code

Customization

If you have your own CSS class name for images, use it like this:

window.ImgBlurIn.watch('your-class');Copy the code

Browser Compatibility

  • IE10+
  • Opera 12+
  • Safari 5+
  • Chrome
  • Firefox
  • iOS 6+
  • The Android 4.4 +

Thanks

License

MIT

Copyright (c) 2017-present, shenfe