Lazy loading images With the intersection observer

Transcript

1. LAZY LOADING IMAGES WITH THE INTERSECTION OBSERVER SLC Front end DEV
2. I ❤ • OPEN SOURCE @AMPHTML • INSTRUCTOR @UDEMY • ENGINEERING @IMPARTNERPRM • !" @juanlizarazog HI! I AM JUAN LIZARAZO
3. @juanlizarazog AMPPROJECT.ORG BUILDING THE FUTURE WEB, TOGETHER. THE AMP PROJECT
4. @juanlizarazog What’s lazy loading?
5. @juanlizarazog Bounce rate
6. @juanlizarazog
7. PERFORMANCE MATTERS! @juanlizarazog
8. LAZY LOADING RESOURCES MATTER! @juanlizarazog
9. @juanlizarazog Our Goal Complete first meaningful render under 1 second
10. Image Lazy loading @juanlizarazog
11. @juanlizarazog No. 1 Element.getClientBoundingRect()
12. @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 }
13. @juanlizarazog DOMRect is just a rectangle
14. @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
15. @juanlizarazog VIEW PORT
16. @juanlizarazog Let’s see it
17. @juanlizarazog No. 2 new IntersectionObserver(callback, options);
18. @juanlizarazog IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.
19. @juanlizarazog const options = { root: null, rootMargin: '0px', threshold: 0 } const observer = new IntersectionObserver( callback, options );
20. @juanlizarazog That’s it, so let’s see it
21. @juanlizarazog Love your users ❤
22. @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