Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Intro to the Intersection Observer API - Tara Ojo

103 views

Published on

FrontEnders - 15 March 2018

Published in: Technology
  • Login to see the comments

  • Be the first to like this

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

×