Lightweight jQuery Image Lazy Load Plugin - unveil

Lightweight jQuery Image Lazy Load Plugin - unveil
File Size: 5.12 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.