Coding a Lazy-Load Website Interface using Unveil.js

Advertise here with BSA

There have been a number of recent open source plugins for lazing loading images. A popular choice is Unveil.js which was just recently published onto Github. It is meant to be a lightweight version of the original LazyLoad plugin built over jQuery. After testing out a number of different features I am a huge fan of Unveil.js.

Interface design is incredibly simple once you understand the basics. It will take some practice getting used to the code samples and writing your images properly. However the lazy load plugin can showcase tremendous support across all typical web browsers. Not to mention the popularity among users who are transferring data over slow Internet connections. The lazy load plugin will shave off latency times and still provides an exhilarating user experience.

Live Demo – Download Source Code

Getting Started

I am building the typical HTML5 layout using some of the basic scripts you would expect. More specifically I have saved a copy of the latest jQuery library along with a copy of the Unveil.js plugin. You can download this right off the Github repo which includes a full JS file along with a minified script.


<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Lazy-Loading Images with Unveil.js</title>
  <meta name="author" content="Jake Rocheleau">
  <link rel="shortcut icon" href="http://designm.ag/favicon.ico">
  <link rel="icon" href="http://designm.ag/favicon.ico">
  <link rel="stylesheet" type="text/css" media="all" href="css/styles.css">
  <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.unveil.min.js"></script>
</head>

Aside from these main JavaScript files I also have the webpage styles contained inside a file named styles.css. It has all our major resets, layout points, webpage typography, along with other similar ideas. Overall the page layout is very basic since we are only demoing the plugin loading times. It is great because when you run a very minimalist website it only requires a brief turnaround time.

There are just a couple other instances worth discussing as far as the page body itself. We need to understand how to code the HTML5 images so that proper attributes are given their correct values. Additionally we need to make sure that the jQuery code itself is running properly. I added this block into the very bottom of the page body since it only requires a single line of code. But you may place this anywhere in the layout and even move the JS codes into their own file.

Adding HTML Images

The Unveil plugin uses an HTML5 data attribute for loading the image properly. In my example the images are linked back to the original source on Dribbble. However you could simply place an img tag anywhere in the layout and still achieve the same results. There are 3 attributes which are commonly used, and I have only placed 2 inside my code.


  <h1>Unveil.js Lazy-Load Demo</h1>
  <p>The Unveil.js plugin is based off <a href="http://www.appelsiini.net/projects/lazyload">Lazyload</a> with similar features and functionality. This is a brief demo to showcase what is possible using the Unveil plugin.</p>
  
  <div id="imagecontent">
    <!-- image source http://dribbble.com/shots/1105391-New-Project -->
    <p><a href="http://dribbble.com/shots/1105391-New-Project"><img src="images/loader.gif" data-src="images/new-project-screenshot-dribbble.png"></a></p>
    
    <!-- image source http://dribbble.com/shots/1105089-Mobile-operator-application -->
    <p><a href="http://dribbble.com/shots/1105089-Mobile-operator-application"><img src="images/loader.gif" data-src="images/mobile-operator-iphone-app.png"></a></p>

The regular img src attribute should point towards your loading graphic. This could be a default placeholder or it could even just be a blank .gif image. Either way you do not want to point towards the regular image. Instead you should add the regular image file URL into the data-src attribute.

The reason I love this plugin so much is because it also supports retina devices. Not just mobile smartphones or tablets, but also the newer laptops which are coming out using retina screens. You should have an image @2x the size of your regular graphic and include the URL into a new data-src-retina attribute. Notice that my images do not use this because I already included the @2x size as the standard data src. But the functionality is brilliant and very easy to implement.

Activating Unveil.js

I’d like to skip over the CSS because there is nothing of major value in the stylesheet. It merely repositions the layout and resets some of the browser defaults, but there is nothing pertaining directly to the script itself. It would be better if we jump towards the bottom of my index file and locate the script codes just before the closing body tag.


<script type="text/javascript">
$(function(){
  $("img").unveil();
});
</script>

The jQuery selector is targeting every img tag on the page and running the plugin’s main function unveil(). It will load your original src attribute as the first image and then replace this as the user scrolls below the page. There are also some options you may pass into the function for updating the settings. For example, any numerical value passed as a parameter will update the pixel distance for how far away to start loading new images.


$("img").unveil( 200 );

This is an example which I took directly from the Github repo. It would be nice to see additional parameters getting included into the script as time passes. However I think what Unveil offers at this point is already a strong plugin for web developers. Lazy loading images do not require a whole lot of options to get everything working. But you should check out the live project page along with my own live demo to see how this can be implemented in your website.

Live Demo – Download Source Code

Final Thoughts

I do hope this tutorial can provide some value to other web developers. There are many techniques which require practice and building your own custom scripts from scratch does make sense. However the lazy loading functionality is so easy to implement, and using Unveil.js will only save that much more time. If you have questions or ideas on the post feel free to share with us in the discussion area below.