SEO 首图预加载

components/LazyImage.js

@@ -4,15 +4,15 @@ import React, { useEffect, useRef, useState } from 'react'
  * 默认懒加载占位图
  */
 const loadingSVG = (
-    <svg
-      width="100"
-      height="100"
-      viewBox="0 0 100 100"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="#ccc"
-    >
-      <circle cx="50" cy="50" r="42" strokeWidth="8" />
-    </svg>
+  <svg
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="#ccc"
+  >
+    <circle cx="50" cy="50" r="42" strokeWidth="8" />
+  </svg>
 )
 
 /**
@@ -20,7 +20,18 @@ const loadingSVG = (
  * @param {*} param0
  * @returns
  */
-export default function LazyImage({ id, src, alt, placeholderSrc = loadingSVG, className, width, height, onLoad, style }) {
+export default function LazyImage({
+  priority,
+  id,
+  src,
+  alt,
+  placeholderSrc = loadingSVG,
+  className,
+  width,
+  height,
+  onLoad,
+  style
+}) {
   const imageRef = useRef(null)
   const [imageLoaded, setImageLoaded] = useState(false)
 
@@ -31,6 +42,17 @@ export default function LazyImage({ id, src, alt, placeholderSrc = loadingSVG, c
     }
   }
 
+  // 预加载图片
+  useEffect(() => {
+    if (priority) {
+      const link = document.createElement('link')
+      link.rel = 'preload'
+      link.as = 'image'
+      link.href = src
+      document.head.appendChild(link)
+    }
+  }, [priority, src])
+
   useEffect(() => {
     const observer = new IntersectionObserver(
       (entries) => {