Step 1: Create a New Component

In the AEM Sites console, create a new component under your desired project path (e.g., /apps/your-project/components/intersection-observer).

Next create the following files in your component folder:

intersection-observer.html

⁠intersection-observer.js

⁠intersection-observer.css

Step 2: Implement the HTML Structure

In intersection-observer.html, set up the basic structure that you want to observe. For example:

<div class="intersection-observer-container">
    <h2>Lazy Loaded Images</h2>
    <img class="lazy-load" data-src="path/to/image1.jpg" alt="Image 1" />
    <img class="lazy-load" data-src="path/to/image2.jpg" alt="Image 2" />
    <img class="lazy-load" data-src="path/to/image3.jpg" alt="Image 3" />
</div>

Step 3: Write the JavaScript Logic

In intersection-observer.js, implement the Intersection Observer logic:

document.addEventListener("DOMContentLoaded", function() {
  const images = document.querySelectorAll('.lazy-load');
  const options = {
  		root: null, // Use the viewport as the root        
		rootMargin: '0px',
		threshold: 0.1 // Trigger when 10% of the image is visible    
  };    

  const loadImage = (image) => {
    image.src = image.dataset.src;
    image.classList.remove('lazy-load');
  };
  
  const observerCallback = (entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        loadImage(entry.target);
        observer.unobserve(entry.target); // Stop observing once loaded
      }        
    });
  };    
  
  const observer = new IntersectionObserver(observerCallback, options);    
  
  images.forEach(image => {
    observer.observe(image);
  });
});

Step 4: Add CSS for Styling

In intersection-observer.css, you can add some basic styles to enhance visibility:

.intersection-observer-container {    
    text-align: center;
    margin: 20px;
}
.lazy-load {
    opacity: 0;
    transition: opacity 0.5s ease-in;
}
.lazy-load[data-src] {
     opacity: 1;
}

Step 5: Include the Component in Your AEM Page

Open the Page: Navigate to a page where you want to include the Intersection Observer component.

Drag and Drop: Use the AEM editor to drag and drop your new component onto the page.

Publish the Page: After adding the component, publish the page to see the changes live.

Step 6: Testing

Once your page is published, scroll down to see the images load as they enter the viewport. You should observe that the images are only loaded when they are about to be viewed, optimizing performance and resource usage.

Conclusion

By following this tutorial, you have successfully implemented the Intersection Observer API in AEM 6.5. This powerful API can be used for various purposes, including lazy loading images, triggering animations, and implementing infinite scrolling. Experiment with different thresholds and root margins to see how they affect the behavior of your observed elements.

For further reading and advanced use cases, refer to the

MDN Web Docs on Intersection Observer API

and explore more about its capabilities.

Push Your Website intoHigh PerformanceDigital Experience.

Ready to explore?Unlock new features.

Stay ahead with our Exclusive Newsletter!

Push Your Website into
High Performance
Digital Experience.