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 !
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
8. Just Lazy
- 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.
- 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
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:
- 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.
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
If you know another awesome plugin for Lazy Loading of images, please share it with the community in the comment box.