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 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.
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.
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.
Hopefully you can follow their help to integrate them into your application. Do you have a favorite? Let me know below.