Top 4 Lazy Load Open-Source Projects

yall.js

2 1,359 0.0 JavaScript

A fast, flexible, and small SEO-friendly lazy loader.

Project mention: Tips For Building Faster Websites with Efficient CSS Optimisation | dev.to | 2023-08-14

Developers also employ alternative methods for lazy loadings, such as the scroll event listener, besides the Intersection Observer API and the loading property. Unlike the Intersection Observer API, which only monitors the elements targeted for lazy loading, developers attach a scroll event listener to every element on the page. Once the element marked for lazy loading is within the visibility range of the user, a function is invoked to switch the image or video URL with the attribute previously holding it, just like with the Intersection Observer API. This approach is costly for a web project. As the developer seeks to optimise page load by integrating lazy loading to some elements on the webpage, the developer slows down the page's performance due to multiple firing of an event as the function meets each element. Moreover, packages for JavaScript that deal with lazy loading exist. For instance, the LazyLoad library uses the Intersection Observer API, a lightweight JavaScript library. It supports many lazy loading features, such as preloading, responsive image loading, and custom loading animations. Additional lazyloading libraries include Yall.js, Lozad.js, LazyLoad XT for jQuery, and many more.

react-lazy-load

0 975 0.0 TypeScript

React component that renders children elements when they enter the viewport.
SurveyJS

surveyjs.io featured

Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
react-native-progressive-fast-image

1 100 1.8 TypeScript

Customizable progressive image for React Native with FastImage
react-intersection-revealer

1 2 0.0 TypeScript

An easy-to-use React hook that tells you whether a component/element is visible on the viewport currently, and if yes, how much of it is visible.

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).