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.

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

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

🌅 React lazy load images with IntersectionObserver API and Priority Hints

A Svelte action that monitors an element enters or leaves the viewport.🔥

trigger functions and events based on the element position on the screen

A JavaScript library to animate content on page scroll.

A Vue component to add intersection-observer to a Vue component or HTML element.

Detect if an Ember View or Component is in the viewport @ 60FPS

A library for idiomatic use of IntersectionObserver with Angular

A set of tools for emulating browser behavior in jsdom environment

Vue 2 directive that adds css classes when the element is the viewport

Component-based lazy (CLazy) load images in Vue.js 2

Image lazy load library for Angular 2+

React hook to use IntersectionObserver declaratively.

🔎 Intersection Observer API wrapper for Blazor applications

Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

React Hook to track the visibility of a functional component

A live example of progressive image loading strategies

A rule-based approach to tracking element visibility.

Vue component for the Intersection <Observer /> API

A simple React hook that works with the Intersection Observer API.

Know when elements are about to scroll into the viewport

💨 A tiny library to transition your DOM elements as they become visible in the viewport.

Wrapper around IntersectionObserver to hide away its weirdness and increase ease of usability

A lit-element web component that uses Three.js to display an STL model file.

Practical, real world examples of Intersection Observer

Showcasing of the Intersection Observer API in React with createRef()

A convenient wrapper around IntersectionObserver for tracking element position relative to the viewport.

Acroll Animation using Browser IntersectionObserver API