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