Highly performant, light 1kb and configurable lazy loader in pure JS with no dependencies for responsive images, iframes and more. It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API with tremendous performance benefits. Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect forces the browser to re-layout the entire page and will introduce considerable jank to your website. Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
yall.js is a featured-packed SEO-friendly lazy loader for <img>, <picture>, <video> and <iframe> elements, as well as CSS background images. It works in all modern browsers, including IE 11. It uses Intersection Observer where available, but as of version 3, this API must be polyfilled for older browsers. It can also monitor the DOM for changes using Mutation Observer to lazy load elements that have been appended to the DOM after initial load, which may be desirable for single page applications. It can also optimize use of browser idle time using requestIdleCallback, and reduce jank by using requestAnimationFrame.
React lazy load images with IntersectionObserver API and Priority Hints.
Asynchronous boundary detection – lazy-loading, infinite scroll, and more. Whether you’re lazy-loading images, implementing infinite-scroll, or avoiding an ex-lover. it’s important to set boundaries. Historically, boundary detection required a mix of event handlers, loops, and calls to getBoundingClientRect. Since these operations run on the main thread, performance would suffer. Bounds.js defies these expectations, providing a simple and powerful API. It detects intersections between elements asynchronously, keeping complex operations off the main thread and improving performance.
Lazy load images using Intersection Observer, apply progressive rendering and css animations. A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.
A library to lazy load images using Intersection Observer.
ng-in-viewport gives you a directive that uses Intersection Observer API. To provides a simple way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport.