web

Next.js × microCMSでリッチエディタで書いた記事の画像にloading属性を付ける

公開日:2022年1月30日
最終更新日:2022年1月30日
目次
  • ライブラリ追加
  • imgタグにloading属性をつける
  • 参考サイト

記事中にある img タグに loading="lazy" 属性を付けて、画像を遅延読み込みするようにします。

ライブラリ追加

jsdom というライブラリを使います。jsdom はHTMLパーサにDOM APIを追加したものらしい。類似のライブラリで cheerio というものがあり、最初はこっちを使ってましたが、jQueryっぽい書き方が馴染まなかったりして、jsdom を使うことにしました。

yarn add jsdom @types/jsdom


imgタグにloading属性をつける

記事詳細ページの getStaticProps で以下のように書きます。必要な部分だけ抜き出しています。
jsdomimg タグを取得し、それらに対して loading 属性を追加するようにしています。

import { JSDOM } from 'jsdom'

export const getStaticProps: GetStaticProps<StaticProps> = async (context) => {
  const { params, previewData } = context
  if (!params?.category || !params?.id) {
    throw new Error('Error: ID not found')
  }

  try {
    const id = toStringId(params.id)
    const data = await client.get({
      endpoint: 'blog',
      contentId: id,
    })
    
    // この辺り追加
    const dom = new JSDOM(data.content)

    dom.window.document.querySelectorAll('img').forEach((element) => {
      element.setAttribute('loading', 'lazy')
    })
    const body = dom.window.document.body.innerHTML

    const category = await client.get({
      endpoint: 'blog-category',
    })

    return {
      props: {
        blog: data,
        body: body,
        category: category.contents,
        currentCategory: toStringId(params.category),
      },
    }
  } catch (e) {
    return { notFound: true }
  }
}


簡単ですが、これで記事の画像を遅延読み込みできるようになりました。

参考サイト

こちらの方の記事にあるGitHubのコードを参考にしました。
microCMSブログのNext.js版を作成した

About the author

大阪でフロントエンドエンジニアをしています。写真を撮るのが趣味です。よかったら500pxに載せてる写真も見てください。
web上に公開しているので、正確さに可能な限り努力してますが、個人の備忘録程度に書いてるので、ご自身の判断で参考程度に読んでください。
間違いやご意見があれば、コンタクトやSNSに気軽にご連絡ください。

Read next

Category

  • web
  • 雑記