A couple of years ago, the bad manipulation of the HTML structure could affect the SEO of your page, so following the normal rules of loading images, even if they were huge was a must. Nowadays, the lazy loading is a must for every website with a lot of graphic content, this only if you want to keep your visitors with a smile on the face. But, what should you do if your website needs good SEO and at the same time optimal performance for your visitors? Since the search bots of started to render JavaScript, it can now see and index your lazy loaded images. Which means only one thing, you only need to worry about the performance of your webpage.
If your website displays a lot of images, besides from the optimization of them in the background with tools to decreaze the size for example without losing quality, the lazy loading is a very nice and necessary technique in those kind of websites. Basically, images are loaded only when the image that will be shown enters in the user's viewport. In this top, we collected 10 of the most known and useful Lazy Loading plugins for jQuery or VanillaJS that you can start to use on any of your projects, enjoy them !
10. jQuery.LazyLoader
This plugin allows you to convert links either pointing to an image src or with a data-img attribute to images with that source.
9. Lazy Load by VVO
This plugin allows you to lazy load images, iframes, widgets with a standalone JavaScript lazyloader.
8. Just Lazy
Just Lazy is a lightweight javascript plugin to lazy load responsive images. Most of the existing javascript plugins using extensive dependencies or supporting just the img-tag without responsive parts, this plugin meants to be a very recommendable alternative:
- 100% performance with plain javascript (no jQuery)
- 100% valid HTML (no empty src tag)
- Simplicity and lightness (just lazy loading of images, no special cases)
- Heavily tested on various devices, browsers and OS versions
7. jQuery Lazy
jQuery Lazy is a lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto. It's designed to speed up page loading times and decrease traffic to your users by only loading the content in view. You can use Lazy in all vertical and horizontal scroll ways. It supports images in <img /> tags and backgrounds, supplied with css like background-image, by default. On those elements Lazy can set an default image or a placeholder while loading and supports retina displays as well. But Lazy is even able to load any other content you want by plugins and custom loaders.
6. Responsively Lazy
Responsively lazy is one of the best implementations in JavaScript for Lazy Loading:
- does not make ANY unnecessary requests
- works on modern browsers that support srcset. As of February 2017 that's 85.27%.
- handles loaded image resizes (when the phone is rotated from portrait to landscape). It's a nice bonus.
- does not break the page when an old browser is used
- works great in read-it-later tools like Pocket
- works great in content sharing on social networks like Facebook and Pinterest
- supports WebP
5. Lazy Load
LazyLoad is a fast, lightweight and flexible script to allow you enhance performance on your website by loading images only as they enter (or are about to enter) the viewport or a scrollable area, with best support to the img srcset attribute and to the progressive JPEG image format. It speeds up your web application by loading images only as they enter the viewport. LazyLoad is written in plain (vanilla) Javascript featuring the Intersection Observer API, it supports responsive images, it's SEO friendly and it has some other notable features.
4. Lozad.js
Lozad, is a highly performant, light ~0.7kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using the IntersectionObserver API. This plugin:
- lazy loads elements performantly using pure JavaScript,
- is a light-weight library, just 731 minified & gzipped,
- has NO DEPENDENCIES :)
- allows lazy loading of dynamically added elements as well,
- supports responsive images and background images
It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits.
3. Unveil
Unveil.js boosts the loading time of your web page by delaying loading of images in long web pages because images outside of viewport (visible part of web page) won't be loaded until the user scrolls to them. Lazy Load has some cool options such as custom effects, container, events or data attribute. If you're not gonna use any of them you can reduce the file size by leaving just the essential code to show the images. By default, images are only loaded and "unveiled" when the user scrolls to them and they became visible on the screen.
2. jQuery LazyLoad
jQuery LazyLoad prevents the load of images outside of the viewport until the user scrolls to them. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume.
1. LazySizes
LazySizes is one of the most known plugins for lazy loading of images (responsive and normal), iframes and more, it is of high performance, SEO friendly and detects any visibility changes triggered through the user interaction, CSS or JavaScript without configuration. It may become also your number one tool to integrate responsive images. It can automatically calculate the sizes attribute for your responsive images, it allows you to share media queries for your media attributes with your CSS, helping to separate layout (CSS) from content/structure (HTML) and it makes integrating responsive images into any environment really simple. It also includes a set of optional plugins to further extend its functionality.
If you know another awesome plugin for Lazy Loading of images, please share it with the community in the comment box.
