Implementing image lazy loading in Astro

Reflection#

When it comes to implementing image lazy loading, it's quite simple using the Intersection Observer API.

However, implementing it in Astro is different because we're not dealing with lazy loading images on a website, but rather lazy loading images in a blog.

In Astro, blogs are written using Markdown, and the rendering component is specified in the Frontmatter by adding the layout attribute. When we open a blog post, the component is already loaded. The image tags in the blog post already have the src attribute, and the data has already been fetched.

My initial idea was to find a hook function after opening the page but before the images send requests, remove the src attribute from the image tags, and store it in data-src. I was looking for a hook function that would be triggered earlier than window.onload, but there was no such method.

So, I thought about handling the image tags when rendering Markdown into HTML. This approach should work, so I went through the Astro documentation and found the configuration method markdown.remarkPlugins.

Following the clues on the official website, I searched on GitHub and found this package: remarkjs/remark. It provides a code example that reduces the heading level by one, meaning an h2 tag becomes an h3 tag.

import { visit } from 'unist-util-visit'

function myRemarkPluginToIncreaseHeadings() {
  return (tree) => {
    visit(tree, (node) => {
      if (node.type === 'heading') {
        node.depth++
      }
    })
  }
}

Original Markdown document:

# Hi, Saturn!

The resulting HTML page:

<h1>Hi, Saturn</h1>

After formatting, the resulting HTML page becomes:

<h2>Hi, Saturn</h2>

From the example above, I felt that this plugin could meet the requirements, so I started implementing it.

Implementation#

Add the following code to astro.config.mjs:

import { visit } from 'unist-util-visit'

function myRemarkPluginToLazyLoadImage() {
  return (tree) => {
    visit(tree, (node) => {
      if (node.type === 'image') {
        // Assign the url attribute to alt, and clear the url attribute so that the image won't load when the page loads
        node.alt = node.url 
        node.url = ''
      }
    })
  }
}

export default defineConfig({
  ..., // Other configurations
  markdown: {
    remarkPlugins: [myRemarkPluginToLazyLoadImage],
    // Make sure to include this, otherwise it won't process the md into html, only the code inside the plugin
    extendDefaultPlugins: true, 
  }
})

Add the following code to the Astro component that imports the Markdown:

<script>
/* Find all img tags in the blog */
var markdownBody = document.querySelector(".markdown-body");
let images = markdownBody.querySelectorAll("img");

const callback = (entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const image = entry.target;
      const data_src = image.getAttribute("alt");
      image.setAttribute("src", data_src);
      observer.unobserve(image);
      }
    });
  };
/* Add the listener method to each img tag */
  const observer = new IntersectionObserver(callback);
  images.forEach((image) => {
    observer.observe(image);
  });
}
</script>

And there you have it, our image lazy loading is complete!