imgにloading=lazyを追加

src/lib/components/Markdown/Markdown.ts

@@ -12,6 +12,7 @@ import rehypeExternalLinks from 'rehype-external-links'
 import rehypeGithubAlert from 'rehype-github-alert'
 import rehypeStringify from 'rehype-stringify'
 import rehypeHeaderLinks from 'rehype-header-links'
+import rehypeLazyImg from './rehypeLazyImg'
 
 
 function Perser(mdtext: string): string {
@@ -22,6 +23,7 @@ function Perser(mdtext: string): string {
         .use(remarkRehype, {allowDangerousHtml: true})
         .use(rehypeSlug)    // headingにidを設定
         .use(rehypeKatex, {output:'mathml'})    // 数式
+        .use(rehypeLazyImg)
         .use(rehypeHighlight)   // Syntax highlight
         .use(rehypeExternalLinks, {target:'_blank', rel:['noreferrer','noopener']}) // 外部サイトを新規タブで開く
         .use(rehypeGithubAlert)

src/lib/components/Markdown/rehypeLazyImg.ts

@@ -0,0 +1,17 @@
+import type { Root, RootContent } from 'hast'
+
+export default function rehypeLazyImg() {
+    return function(tree: Root) {
+        function loop(children: RootContent[]){
+            for (let child of children) {
+                if (child.type == 'element' && child.tagName == 'img') {
+                    child.properties.loading = 'lazy'
+                }
+                if ('children' in child) {
+                    loop(child.children)
+                }
+            }
+        }
+        return loop(tree.children)
+    }
+}