Successfully reported this slideshow.

Intro to the Intersection Observer API - Tara Ojo

0

Share

Loading in …3
×
1 of 14
1 of 14

More Related Content

Related Books

Free with a 14 day trial from Scribd

See all

Intro to the Intersection Observer API - Tara Ojo

  1. 1. Intro to the Intersection Observer API (for lazy loading) @tara.ojo
  2. 2. Tara Ojo Software Engineer @tara_ojo
  3. 3. @tara.ojo Intersection observer API “The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport." - Mozilla docs https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
  4. 4. Intersection observer API “Make changes when something enters the viewport (or parent)“ - Tara Ojo
  5. 5. @tara.ojo
  6. 6. @tara.ojo <img src=“placeholder.png” alt=“Placeholder image” id=“theImage” />
  7. 7. @tara.ojo const observer = new IntersectionObserver(callback, options);
  8. 8. @tara.ojo const callback = entries => { entries.forEach(entry => { if(entry.isIntersecting) { // change the element, load the real image etc. entry.target.src = ‘the-real-image.png’; entry.target.alt = ‘The real alt text’; } }); }; const observer = new IntersectionObserver(callback, options);
  9. 9. @tara.ojo const options = { rootMargin: '0px', threshold: 1.0 }; const observer = new IntersectionObserver(callback, options);
  10. 10. @tara.ojo const options = { rootMargin: ‘0 0 100px’, threshold: 1.0 }; const observer = new IntersectionObserver(callback, options);
  11. 11. @tara.ojo const options = { rootMargin: '0px', threshold: 1.0 }; const observer = new IntersectionObserver(callback, options);
  12. 12. @tara.ojo <img src=“placeholder.png” alt=“Placeholder image” id=“theImage” /> const observer = new IntersectionObserver(callback, options); const target = document.querySelector(‘#theImage’); observer.observe(target);
  13. 13. @tara.ojo
  14. 14. Thanks! @tara.ojo

×