A plugin used to make blur effect on image that needs to be preloaded.
Just as Medium does:
Use bower
bower install --save blur-image
Then, you just import the JavaScript file and Style file into your page as following.
<link rel="stylesheet" href="bower_components/blur-image/dist/blur-image.css">
<script src="bower_components/blur-image/dist/blur-image.js"></script>
Use npm packager
npm install --save blur-image
And import the files.
<link rel="stylesheet" href="node_modules/blur-image/dist/blur-image.css">
In your JavaScript file, you can use require
to import.
let blurImg = require('blur-image');
In HTML, just add tags with the following attributes:
<figure name="blur"
class="blur-image-container"
data-real-width="1174"
data-real-height="670"
data-src="images/sm2.jpeg"
src="https://cdn-images-1.medium.com/max/2000/1*0WwtDkE1q6HGZwD6Kn9SuQ.jpeg"
></figure>
<!-- no matter how many tags here -->
name
: Must beblur
.class
: Must beblur-image-container
(Of course, you can change this in the css file).data-real-width
: Your image's real width.data-real-height
: Your image's real height.data-src
: The small image url to load first in you local directory.src
: The large image's url.
Then, in your app.js
, just one line, you're all done.
blurImg();
git clone https://github.com/Erichain/blur-image.git
Run npm install
.
Run npm run dev
to start local development.
Run npm run build
to build.
Release under the MIT license.