JavaScript lazy-loading

Open-source JavaScript projects categorized as lazy-loading | Edit details
Related topics: #JSX #React #Images #Webpack #Loader

Top 5 JavaScript lazy-loading Projects

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

    Project mention: Beginners Guide to Web Performance: Optimizing Images | dev.to | 2021-09-06

    If you want to guarantee lazy-load across all (JavaScript-capable) browsers and not just images, I've used Vanilla Lazyload a couple years ago with success, but as this relies on using a data-src attribute, you will get W3C validation errors unless you also set a src attribute. But you don't want to set the src to a real image, because this will nullify the whole point of using the plugin, so set it to a 1x1 pixel "image" that will immediately get replaced by the data-src once the image scrolls into view.

  • GitHub repo loading-attribute-polyfill

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

    Project mention: The best approach to lazy load images for maximum performance | reddit.com/r/Frontend | 2021-04-19
  • Scout APM

    Less time debugging, more time building. Scout APM allows you to find and fix performance issues with no hassle. Now with error monitoring and external services monitoring, Scout is a developer's best friend when it comes to application development.

  • GitHub repo react-on-screen

    Check if a react component in the viewport

    Project mention: Is an HTML element in the viewport? with React hooks | dev.to | 2021-02-17

    React on screen

  • GitHub repo ecommerce-store-reactjs-stripe-oauth2

    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.

    Project mention: Boilerplates for websites/app building | dev.to | 2021-06-26

    6.Products detailed page:If you are coding in React then you can use React Router to create a product detailed page.You can fetch the data from external api or the local file. Example:Github Repository Link

  • GitHub repo use-imported-hook

    Project mention: 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. | reddit.com/r/reactjs | 2021-06-06
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). The latest post mention was on 2021-09-06.

JavaScript lazy-loading related posts

Index

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

Project Stars
1 vanilla-lazyload 6,636
2 loading-attribute-polyfill 479
3 react-on-screen 385
4 ecommerce-store-reactjs-stripe-oauth2 26
5 use-imported-hook 1
Find remote jobs at our new job board 99remotejobs.com. There are 29 new remote jobs listed recently.
Are you hiring? Post a new remote job listing for free.
OPS - Build and Run Open Source Unikernels
Quickly and easily build and deploy open source unikernels in tens of seconds. Deploy in any language to any cloud.
github.com/nanovms