We have all had to wait for websites to load and the main offenders are often images and video. Loading a whole page makes no sense if you’ll be clicking away before you scroll down to the hidden content. There are quite a few plugins for WordPress that achieve lazy loading, but it’s much harder to find libraries for non-Wordpress sites.
Here are some of the better ones that you may find useful:
Lazysizes
Lazysizes is a fully featured lazy loading library that lazy loads images and iframes quickly. It automatically binds to a lazyload class on elements, and requires you to specify image URLs in data-src and/or data-srcset attributes. The contents of these are swapped into src and/or srcset attributes, respectively. It uses intersection observer (which you can polyfill), and it can be extended with a number of plugins to do things such as lazy load video.
https://github.com/aFarkas/lazysizes
Lozad
Lozad.js is a high performance and SEO friendly lazy loader for images (responsive and normal), iFrames and more, that detects any visibility changes triggered through user interaction, CSS or JavaScript without configuration. It’s extremely fast but needs to be polyfilled before you can use it on older browsers.
https://github.com/ApoorvSaxena/lozad.js
Blazy
This stands for be lazy! bLazy is a lightweight script for lazy loading and multi-serving images, iframes, videos and more (less than 1.4KB minified and gzipped). It’s written in pure JavaScript which is why it doesn’t depend on 3rd-party libraries such as jQuery. It lets you lazy load and multi-serve your images so you can save bandwidth and server requests. The user will have faster load times and save data usage if they don’t browse the whole page. It works in all modern browsers including IE7+ and is pretty damn lightweight. As with lazysizes above, it doesn’t need any third party utilities to load, but doesn’t use intersection observer.
https://github.com/dinbror/blazy
Yall
yall.js (Yet Another Lazy Loader) A fast, flexible, and small SEO-friendly lazy loader that uses IntersectionObserver and falls back to event handlers. It’s compatible with IE11 and major browsers.
https://github.com/malchata/yall.js
React-lazyload
If you need a React-specific lazy loading library then this may fit the bill. . While it doesn’t use intersection observer, it does provide a familiar method of lazy loading images for those accustomed to developing applications with React.
Each of these lazy loading libraries is well documented, with plenty of markup patterns for your various lazy loading endeavors. If you’re not one to tinker, grab a library and go. It will take the least amount of effort.
https://github.com/twobin/react-lazyload
Hopefully you can follow their help to integrate them into your application. Do you have a favorite? Let me know below.