Lazy loading images With the intersection observer

LAZY LOADING IMAGES WITH THE INTERSECTION OBSERVER SLC Front end
DEV

I ❤ • OPEN SOURCE @AMPHTML • INSTRUCTOR @UDEMY •
ENGINEERING @IMPARTNERPRM • !" @juanlizarazog HI! I AM JUAN LIZARAZO

@juanlizarazog AMPPROJECT.ORG BUILDING THE FUTURE WEB, TOGETHER. THE AMP PROJECT

@juanlizarazog What’s lazy loading?

@juanlizarazog Bounce rate

@juanlizarazog

PERFORMANCE MATTERS! @juanlizarazog

LAZY LOADING RESOURCES MATTER! @juanlizarazog

@juanlizarazog Our Goal Complete first meaningful render under 1 second

Image Lazy loading @juanlizarazog

@juanlizarazog No. 1 Element.getClientBoundingRect()

@juanlizarazog const domRect = element.getBoundingClientRect(); { "x": 418.4375, "y": 172,
"width": 923.328125, "height": 44, "top": 172, "right": 1341.765625, "bottom": 216, "left": 418.4375 }

@juanlizarazog DOMRect is just a rectangle

@juanlizarazog element.getBoundingClientRect(); 1. element.getClientRects(); 2. Returns a DOMRectList 3. Returns
the union of these rectangles which is the DOMRect returned by element.getBoundingClientRect(); * Amount of scrolling matters

@juanlizarazog VIEW PORT

@juanlizarazog Let’s see it

@juanlizarazog No. 2 new IntersectionObserver(callback, options);

@juanlizarazog IntersectionObservers let you know when an observed element enters
or exits the browser’s viewport.

@juanlizarazog const options = { root: null, rootMargin: '0px', threshold:
0 } const observer = new IntersectionObserver( callback, options );

@juanlizarazog That’s it, so let’s see it

@juanlizarazog Love your users ❤

@juanlizarazog Thank you! Source code: https://github.com/juanlizarazo/image-lazy-load-demos Slides: https://speakerdeck.com/juanlizarazo/lazy-loading-images-with-the-intersection-observer

Lazy loading images With the intersection observer

Lazy loading images With the intersection observer

Juan

More Decks by Juan

Other Decks in Programming

Featured

Transcript