The Absolute Best Lazy Load Javascripts

In a field dominated by imagery, using the best lazy load javascripts possible can help you deliver amazing impact without becoming an absolute drag on your pageload times.

Web designers are constantly weighing two factors - form and function. The value of pictures really can't be overstated, but they do come with their own drawbacks... most notably the size. Anyone old enough to remember the "dial-up" days can certainly attest to the bandwidth imagery can occupy. As the value of providing a solid user experience grows, including images judiciously and providing them efficiently becomes a field all of its own. To that end - lazy loading images seem to be the best solution. Ultimately the goal is to delay loading an image until it's actually needed by the viewer. Wherever the field web design expands, that seems like a resolution that should remain useful for quite some time. While researching different lazy loading approaches for a recent project we decided to keep a few notes so we can provide our visitors with a definitive list of the absolute best lazy loading javascripts. We've included the best options currently available, along with some sample code snippets, and a few performance tips to have your project humming in no time!

Best Lazy Load Javascripts List

• Unveil.js
• LL Plugin for jQuery
• jQuery LL XT
• Responsive LL
• Echo.js
• VVO

• Unveil.js

  #1

  Unveil is a lightweight interpretation of Mika Tuupola's classic LazyLoad plugin. The best part of Unveil is it's efficient approach, but it does offer a couple options right out of the box. You can easily specify a separate "Retina version" of your image, work with responsive images, set a threshold to initiate loading just a bit before needed, or even produce a callback upon image triggering. This is one script that goes easy on the bells and whistles, but manages to do a majority of what users need in a simple efficient manner. Highly Recommended.

  Basic HTML Example

  <img src="/nothing.gif" data-src="/img/yourimage.jpg" class="unveil" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/unveil.js" type="text/javascript"></script>
  
  <script>
  $(document).ready(function() {
    $("img").unveil();
  });
  </script>
  

  Download Github

• Lazy Load Plugin for jQuery

  #2

  Whether you prefer this approach or not, Mika Tuupola's Lazy Load Plugin for jQuery is a point of reference for almost every popular lazy loading script out there. This is the option we've chosen to use @ HaeckDesign.com and so far we couldn't be happier with the result. In some cases, this script could be overkill, but the stable base is responsive friendly and comes with an impressive amount of testing and documentation. More advanced users will appreciate the Bower & Node compatibility, transition effects, container targeting, and time-delayed loading (which is a useful feature some approaches seem to have overlooked). Highly Recommended.

  Basic HTML Example

  <img src="/nothing.gif" data-original="/img/yourimage.jpg" class="lazy" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/jquery.lazyload.js" type="text/javascript"></script>
  
  <script>
  $(function() {
      $("img.lazy").lazyload();
  });
  </script>
  

  Project Demo Download Github

• jQuery Lazy Load XT

  #3

  The project page for Lazy Load XT explains the build logic very helpfully. While this makes for good reading, the sheer number of additions can complicate things if you just want to get started quickly. The base js handles responsive images remarkably well and some of the additions can add interesting features. HTML5 video loading, AJAX calls, Onload & OnInit handlers, infinite container scrolling, Deferred Autoload (basically a time-delayed load), and they even offer their scripts via CDN. The build is all well coded, so if you have a large project that demands quality and you don't mind the setup time - this is a great choice.

  Basic HTML Example

  <img src="/nothing.gif" data-src="/img/yourimage.jpg" class="lazyLoadXT" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/jquery.lazyloadxt.js" type="text/javascript"></script>
  
  <script>
  $(elements).lazyLoadXT();
  </script>
  

  Demo Download Github

• Responsive Lazy Loader

  #4

  If you prefer to serve multiple images, have a need for speed, and aren't overly concerned with SEO - Responsive Lazy Loader should be your cocktail of choice. This approach allows you to set a default image name then use breakpoints to tailor a specific media query. Multiple images can result in confusion, but if your doing it programmatically (an application for example) you can retrieve the ideal image size fairly easily. It does also have the best approach to lazyloading an ajax call that we've seen. Basically - Responsive Lazy Loader highlights the best and worst parts of taking a unique approach. It's functional, but it also defies a few standards. If you've got some experience, you should see this scripts usefulness pretty quickly.

  Basic HTML Example

  <img src="/nothing.gif" data-src="/img/yourimage.jpg" class="rlazyimg" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/unveil.js" type="text/javascript"></script>
  
  <script>
  $("img[data-src]").responsivelazyloader({
    $("img").rlazyimg();
  });
  </script>
  

  Demo Download Github

• Echo.js

  #5

  Echo.js is aiming for command line users and if you prefer to build from Bower, this should be a go-to choice. You can easily declare offsets, throttle your loading, trigger callbacks, and it is our only selection that is completely agnostic. Yes - That means no JQuery, If you're interested in reading well formed code hop over to the project page and check out this intuitive approach.

  Basic HTML Example

  <img src="/nothing.gif" data-echo="/img/yourimage.jpg" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/unveil.js" type="text/javascript"></script>
  
  <script>
  $(document).ready(function() {
    $("img").unveil();
  });
  </script>
  

  Project Download Github

• VVO Lazyload

  #6

  VVO has a few compatability issues, but the addition on an onload src attribute allows one really useful function. You can use this attribute to pull delay loading on any "src" object - images, iframes, videos.... even scripts. This is a heaven-sent for anyone fighting against a slew of third party social media "sharing" apis. It's easily installable through Node and clearly better suited to applications projects then web, but the ability to parlay script loading and image loading in one addition makes it an imposable contender.

  Basic HTML Example

  <img src="/nothing.gif" data-src="/img/yourimage.jpg" onload="lzld(this)" alt="alt" title="title" />

  Basic Javascript Inclusion & Initialization

  <script src=“/js/lazyload.min.js" type="text/javascript"></script>
  
  <script>
  global.myLazyload = require('lazyloadjs')();
  </script>
  

  Download Github

It should go without saying but the previous examples are based on a "nothing.gif" "holder file" in the root, an image named "yourimage.jpg" in a folder named "img", and an individual ".js" file in a "js" folder.

Lazy Loading Details and Specs

There are a few questions that you need to ask about your particular project. Do you rely on responsive images? Do you have iframes/videos to include? Are you running JQuery? Are you building from command line? Figure out what you need, make sure you've planned ahead a bit, then make sure you utilize the simplest approach possible that fits those needs. If the description above and details below meet your needs, plug in your favorite lazy loading javascript, customize your initialization, and start tuning away.

* Sizes based on Minimized / GZipped single file size.

Performance Considerations

If you’re looking for additional performance for your website you’ll want to take two major things into consideration, the first being your javascript loading. Each approach is slightly different, but there are a few constants to keep in mind. If your lazy loading script depends on JQuery (which it probably does), make sure that it is loaded before your lazy loading javascript. Depending on what else is loading on that page, your best bet for speeding up your performance is to tailor your "Async" and "Defer" elements. There is a very useful explanation of those attributes illustrated on this post on HTML5Rocks. The basic idea here is to identify those specific scripts as "Asynchronous Friendly" or "Defer-able", introduce them early in the pageload, then actually load them later.

The second large consideration pertains to how "search engine friendly" your images are. If you set your script to load EVERY image on your site, none of those images technically "load" with the page. This will make the page load faster, but since the images aren't there when the page loads, they're not really "crawl-able". If images mean nothing to your site then that approach is certainly easiest, but if you have a image that you want search engines to see there is a pretty easy workaround. Just include a "noscript" version of the image in your code (see sample below) directly after the lazy loaded image.

NoScript Workaround Example

By lazy loading unimportant images and applying a "noscript" patch to the important ones, you can achieve a nice balance of speed and search engine image inclusion. If you want to keep things a little future proof, you might also note that HTML5 identifies "data-original" as the preferred attribute identifier. That likely means that some day search engines will crawl those url's, but for now - that little "noscript" hack seems to do the trick very well.

<noscript><img src="/img/yourimage.jpg" alt="alt" title="title" /></noscript>

Well Done - You Get a High-Five

Hopefully this post has given you some guidance on which lazy loading javascripts are solid options and how to integrate them into your project. If you have any general questions or guidance, please feel free to include it in the comments below and we'll take those into consideration on updates. As always thanks for dropping by and if you've found this post useful be sure to share it with the social buttons below.