Top 18 JavaScript lazy-loading Projects

• vanilla-lazyload

  9 7,579 9.0 JavaScript

  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

  2 7,410 0.0 JavaScript

  🔥 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

  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.

  

• vue-content-placeholders

  1 1,590 0.0 JavaScript

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

• react-lazy-load-image-component

  1 1,366 3.6 JavaScript

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

• 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.

• loading-attribute-polyfill

  4 615 5.1 JavaScript

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

• nuxt-booster

  5 574 9.6 JavaScript

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

  

• InfluxDB

  www.influxdata.com featured

  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.

  

• react-on-screen

  1 402 0.0 JavaScript

  Check if a react component in the viewport

• react-gallery-carousel

  20 212 0.0 JavaScript

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

• angular-ssr

  1 181 7.1 JavaScript

  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.

• skeleton-elements

  1 131 0.0 JavaScript

  Skeleton elements - UI for improved perceived performance

• next-lazy-hydrate

  1 76 1.8 JavaScript

  Optimize nextjs performance by lazy load and hydrate under the fold

• zuix

  4 69 6.0 JavaScript

  zuix.js is a JavaScript library for creating component-based websites and applications.

  

Project mention: Hello everyone - Is there anything I can do to help you today? | /r/webdev | 2023-06-06

Would you have a quick look at this JS library and tell your impressions about it? Is it useful at all, or what could be done to improve it? (beside English writing) Thanks.

• ecommerce-store-reactjs-stripe-oauth2

  1 58 0.0 JavaScript

  This is a fully functional Ecommerce Website which allows the user to login,add products to cart,view products in detail and do the payment through credit card.Built using React,React Router,OAuth2 for user authentication,Stripe for payment and Netlify for deployment.

• LazyAdsense

  1 5 0.0 JavaScript

  LazyAdsense is an OpenSource javascript which supports lazy loading Adsense ads

• use-imported-hook

  1 4 0.0 JavaScript

• recipe-reactjs-api-firebase

  1 4 0.0 JavaScript

  This is a Recipe App which allows the user to login,view recipes,search different recipes and view it in detail.This web app is built using Meals DB API,React,React Router,context api,debounce search functionality,Firebase for user authentication and Netlify for deployment.

• ailog

  1 1 5.2 JavaScript

  An attendance log for Kizuna AIs' videos for when love-pii held the AI identity.

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

JavaScript lazy-loading related posts

• Tips For Building Faster Websites with Efficient CSS Optimisation

  2 projects | dev.to | 14 Aug 2023

• How to Lazy Load Html Videos

  3 projects | dev.to | 11 Mar 2023

• Lazy load all images top to bottom

  1 project | /r/webdev | 19 Jul 2022

• Native lazy-loading - Why doesn't the video element have it?

  1 project | dev.to | 28 Mar 2022

• Beginners Guide to Web Performance: Optimizing Images

  3 projects | dev.to | 6 Sep 2021

• Made a hook to lazy load hooks despite rule-of-hooks, I need people to test it on their projects so I can make the associated babel transform more robust.

  1 project | /r/reactjs | 6 Jun 2021

• The best approach to lazy load images for maximum performance

  1 project | /r/Frontend | 19 Apr 2021
• A note from our sponsor - SurveyJS
  surveyjs.io | 8 May 2024

  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. Learn more →

Index

Sponsored

SaaSHub - Software Alternatives and Reviews

SaaSHub helps you find the best software and product alternatives

www.saashub.com

Do not miss the trending JavaScript projects with our weekly report!