'Blur' Image Loading Effect With jQuery and CSS3 - blurry.load.js

blurry.load.js is a super tiny jQuery plugin which uses CSS3 transitions and blur filter to create a 'blur' effect on your image when loading. You can use it as a cool animation effect for image lazy load.

How to use it:

1. Include the style sheet blurry.load.css in the head section and the JavaScript file blurry.load.js at the bottom of the webpage. The plugin relies on jQuery library so you need to load it first.

<script src="//code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="blurry.load.js"></script>

2. Insert small and large images into the img tag like this:

<img class="image-blur" 
     src="small.jpg" 
     data-large="large.jpg"
>

3. Just call the function on the img tag and the plugin will do the rest.

$('.image-blur').blurryLoad()

---

This awesome jQuery plugin is developed by tushariscoolster. For more Advanced Usages, please check the demo page or visit the official website.