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.
<img src="/nothing.gif" data-src="/img/yourimage.jpg" class="unveil" alt="alt" title="title" />
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.
<img src="/nothing.gif" data-original="/img/yourimage.jpg" class="lazy" alt="alt" title="title" />
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, infinitie 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.
<img src="/nothing.gif" data-src="/img/yourimage.jpg" class="lazyLoadXT" alt="alt" title="title" />
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 also defies a few standards. If you've got some experience, you should see this scripts usefulness pretty quickly.
<img src="/nothing.gif" data-src="/img/yourimage.jpg" class="rlazyimg" alt="alt" title="title" />
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.
<img src="/nothing.gif" data-echo="/img/yourimage.jpg" alt="alt" title="title" />
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.
<img src="/nothing.gif" data-src="/img/yourimage.jpg" onload="lzld(this)" alt="alt" title="title" />
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
- LL for JQuery
- JQuery LL XT
- Responsive LL
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><img src="/img/yourimage.jpg" alt="alt" title="title" /></noscript>
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.
Well Done - You Get a High-Five