Lightweight jQuery Image Lazy Load Plugin - unveil

unveil is an useful and lightweight jQuery plugin for delaying loading of large images in long web pages for reducing the page loading time to improve user experiences. The large images outside the viewport won't be loaded until the visitors scroll down. unveil plugin comes with some cool options such as custom effects, container, events or data attribute. It also supports high-res images for retina displays. 

Related plugins:

• Image Lazy Loader Plugin for jQuery - lazyload
• jQuery Plugin For Lazy Loading Images - lately.js

Basic usage:

1. Include jQuery library and jQuery unveil on the web page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.unveil.js"></script>

2. Create a group of large images on the web page.

<ul>
<li><img src="img/loader.gif" data-src="img/1-thumnail.jpg" data-src-retina="img/1.jpg" /></li>
<li><img src="img/loader.gif" data-src="img/2-thumnail.jpg" data-src-retina="img/2.jpg" /></li>
<li><img src="img/loader.gif" data-src="img/3-thumnail.jpg" data-src-retina="img/3.jpg" /></li>
...
</ul>

3. Call the plugin

<script>
$(function() {
$("li img").unveil(300); // 300px before they appear on the screen
});
</script>

Change log:

2014-05-26

• "lookup" - allow to manually unveil all images in viewport at anytime

---

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