Lazy loading of content blocks

Lazy loading is a technique used to load content only when it is needed, rather than loading everything upfront. This can significantly improve page load times, especially when dealing with large or complex pages with multiple content blocks (images, lists, videos, etc.). Implementing lazy loading in Power Pages can enhance performance, reduce the initial load time, and improve the user experience.

Here’s a guide on how to implement lazy loading for content blocks in Power Pages:

1. What is Lazy Loading?

Lazy loading defers the loading of certain content until it’s required by the user, typically when the content comes into the viewport (visible part of the page). For instance, you don’t load images or complex content until the user scrolls down to that section.

2. Lazy Loading in Power Pages

To implement lazy loading for content blocks in Power Pages (also known as web templates or web pages), we primarily use JavaScript, CSS, and HTML. Here’s how you can implement it:

3. Lazy Loading Images

The most common use of lazy loading is for images. Power Pages allows you to add custom HTML, JavaScript, and CSS to pages, so you can leverage the loading="lazy" attribute to defer loading of images.

Example of Lazy Loading for Images:

htmlCopyEdit<img src="image.jpg" alt="Image Description" loading="lazy">

This will ensure that the image is only loaded when it’s about to enter the viewport. It’s a built-in HTML feature and is supported by most modern browsers.

4. Lazy Loading for Content Blocks Using JavaScript

For non-image content (such as text blocks, videos, or dynamic forms), you’ll need to implement lazy loading with JavaScript.

Here’s a simple example of how to implement lazy loading for a content block (e.g., a section of HTML, a widget, or a custom form) when it comes into view.

Step-by-Step Implementation:

Mark your content blocks with a class or ID: Add a class or ID to the HTML block that you want to load lazily. htmlCopyEdit<div class="lazy-load-content" id="content-block">  </div>
Use the IntersectionObserver API for Lazy Loading: This JavaScript API allows you to detect when an element is about to enter the viewport and trigger a loading action.
JavaScript Code: The following script will listen for elements that enter the viewport and load them dynamically by adding content or activating JavaScript functions:

document.addEventListener("DOMContentLoaded", function () {
  const lazyLoadElements = document.querySelectorAll('.lazy-load-content');

  const loadContent = (entry, observer) => {
    if (entry.isIntersecting) {
      // Load the content block (can be an API call, image loading, etc.)
      entry.target.innerHTML = "<p>Content loaded dynamically!</p>"; // Example of content injection

      // Stop observing this element
      observer.unobserve(entry.target);
    }
  };

  const observerOptions = {
    root: null, // Observe from the viewport
    threshold: 0.5 // Load content when at least 50% of the element is in the viewport
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => loadContent(entry, observer));
  }, observerOptions);

  lazyLoadElements.forEach((element) => {
    observer.observe(element);
  });
});

In this code:

IntersectionObserver checks if the content block is 50% visible in the viewport (threshold: 0.5).
When the block is visible, the loadContent function is triggered, where you can dynamically inject content or activate JavaScript features (like loading data from an API or rendering a form).

Load Additional Content: Instead of simply injecting static content, you can use JavaScript to dynamically fetch and display content (e.g., fetching content from Dataverse or a third-party API).

// Example of loading content dynamically from an API or Dataverse
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    entry.target.innerHTML = `<p>${data.content}</p>`; // Dynamic content injection
  });

5. Lazy Loading for Embeds (e.g., Videos or iFrames)

For embedded content like videos, you can also apply lazy loading to improve performance. Here’s an example of embedding a video using lazy loading:

<iframe class="lazy-load" data-src="https://www.youtube.com/embed/VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen></iframe>

In your JavaScript, detect when the iframe comes into the viewport and replace the data-src attribute with the src attribute to load the video:

document.addEventListener("DOMContentLoaded", function () {
  const lazyIframes = document.querySelectorAll('.lazy-load');

  const loadIframe = (entry, observer) => {
    if (entry.isIntersecting) {
      const iframe = entry.target;
      iframe.src = iframe.getAttribute('data-src'); // Set the actual src
      observer.unobserve(entry.target); // Stop observing
    }
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => loadIframe(entry, observer));
  }, { threshold: 0.5 });

  lazyIframes.forEach((iframe) => {
    observer.observe(iframe);
  });
});

6. Additional Best Practices

Minimize Inline Scripts: Keep scripts separate from HTML content to improve loading and caching performance.
Progressive Loading: Consider showing a loading spinner or placeholder text for blocks that are being lazy-loaded.
Test Across Devices: Test your lazy-loaded content on various devices to ensure it’s functioning properly, especially on mobile devices with slower network speeds.