lazy-loading

Open-source projects categorized as lazy-loading
Edit details
Language: + JavaScript + TypeScript + PHP + HTML + Go + Python
Topics: React Performance Lazyload JavaScript TypeScript
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.
surveyjs.io
Sponsored

Top 23 lazy-loading Open-Source Projects

  • vanilla-lazyload

    LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

  • lozad.js

    🔥 Highly performant, light ~1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more

    • Project mention: Optimizing Images for Developer Blogs | dev.to | 2024-02-20

    Use a JavaScript library to implement lazy loading. There are a number of JavaScript libraries available that can help you implement lazy loading, such as Lazysizes and Lozad.

  • SurveyJS

    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.

    SurveyJS logo

  • ProxyManager

    🎩✨🌈 OOP Proxy wrappers/utilities - generates and manages proxies of your objects

  • react-intersection-observer

    React implementation of the Intersection Observer API to tell you when an element enters or leaves the viewport.

  • splide

    Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors.

    • Project mention: SplideJS – The lightweight, flexible and accessible slider/carousel | news.ycombinator.com | 2023-08-18

  • angular-ngrx-material-starter

    Angular, NgRx, Angular CLI & Angular Material Starter Project

  • var-exporter

    Allows exporting any serializable PHP data structure to plain PHP code

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo

  • vue-content-placeholders

    Composable components for rendering fake (progressive) content like facebook in vue

  • react-cool-inview

    😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

  • react-lazy-load-image-component

    React Component to lazy load images and components using a HOC to track window scroll position.

  • yall.js

    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-cool-virtual

    😎 ♻️ A tiny React hook for rendering large datasets like a breeze.

  • react-cool-img

    😎 🏞 A React <Img /> component let you handle image UX and performance as a Pro!

  • unlazy

    🪧 Universal lazy loading library for placeholder images leveraging native browser APIs

    • Project mention: FLaNK Stack Weekly 19 Feb 2024 | dev.to | 2024-02-19

  • mam_mol

    $mol - fastest reactive micro-modular compact flexible lazy ui web framework.

    • Project mention: $mol – fastest reactive micro-modular compact flexible lazy UI web framework | news.ycombinator.com | 2024-03-13

  • angular-app

    Angular 17 ,Bootstrap 5, Node.js, Express.js, CRUD, PWA, SSR, SEO, Lazy Loading, Examples Angular & React nrwl

  • loading-attribute-polyfill

    Fast and lightweight dependency-free vanilla JavaScript polyfill for native lazy loading / the awesome loading='lazy'-attribute.

  • nuxt-booster

    nuxt-booster will help you to improve the lighthouse performance score (100/100) of your website.

  • Lazytainer

    Docker container lazy loading

    • Project mention: Lazytainer: Monitors network traffic and runs or stops containers accordingly | news.ycombinator.com | 2024-03-31

  • react-on-screen

    Check if a react component in the viewport

  • linqit

    Extend python lists operations using .NET's LINQ syntax for clean and fast coding.

  • react-gallery-carousel

    Carousel component 🎠 supporting touch, mouse, keyboard, thumbnails, fullscreen, lazy loading, SSR and customisations. 💻 Live editor: https://yifanai.com/rgcd1

  • angular-ssr

    Angular 17 Example SSR (Server Side Rendering)

    • Project mention: Angular 17 Upgrade Guide with SSR | dev.to | 2024-02-25

    For some reason, I also needed to fix the paths of all the imports of my custom components, services, models, etc, and TSConfig errors (which you can solve by copying the tsconfig from here), but this is a pretty small complaint.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
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).

lazy-loading related posts

Index

What are some of the best open-source lazy-loading projects? This list will help you:

Project Stars
1 vanilla-lazyload 7,566
2 lozad.js 7,402
3 ProxyManager 4,938
4 react-intersection-observer 4,791
5 splide 4,633
6 angular-ngrx-material-starter 2,800
7 var-exporter 2,003
8 vue-content-placeholders 1,590
9 react-cool-inview 1,461
10 react-lazy-load-image-component 1,363
11 yall.js 1,357
12 react-cool-virtual 1,204
13 react-cool-img 781
14 unlazy 676
15 mam_mol 651
16 angular-app 618
17 loading-attribute-polyfill 614
18 nuxt-booster 574
19 Lazytainer 478
20 react-on-screen 402
21 linqit 245
22 react-gallery-carousel 212
23 angular-ssr 178

Sponsored
Power Real-Time Data Analytics at Scale
Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
www.influxdata.com