图片懒加载组件，优化性能，优化SEO

2026-05-13 23:16:47 +00:00 · 2023-07-21 11:46:31 +08:00
parent 0637af15ad
commit 0aecf06729
40 changed files with 179 additions and 104 deletions
--- a/.env.local
+++ b/.env.local
@@ -1,2 +1,2 @@
 # 环境变量 @see https://www.nextjs.cn/docs/basic-features/environment-variables
-NEXT_PUBLIC_VERSION=4.0.1
+NEXT_PUBLIC_VERSION=4.1.0
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -0,0 +1,88 @@
+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>
+)
+
+/**
+ * 图片懒加载
+ * @param {*} param0
+ * @returns
+ */
+export default function LazyImage({ id, src, alt, placeholderSrc = loadingSVG, className, width, height, onLoad, style }) {
+  const imageRef = useRef(null)
+  const [imageLoaded, setImageLoaded] = useState(false)
+
+  const handleImageLoad = () => {
+    setImageLoaded(true)
+    if (typeof onLoad === 'function') {
+      onLoad() // 触发传递的onLoad回调函数
+    }
+  }
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const lazyImage = entry.target
+            lazyImage.src = src
+            observer.unobserve(lazyImage)
+          }
+        })
+      },
+      { rootMargin: '50px 0px' } // Adjust the rootMargin as needed to trigger the loading earlier or later
+    )
+
+    if (imageRef.current) {
+      observer.observe(imageRef.current)
+    }
+
+    return () => {
+      if (imageRef.current) {
+        observer.unobserve(imageRef.current)
+      }
+    }
+  }, [src])
+
+  // 动态添加width、height和className属性，仅在它们为有效值时添加
+  const imgProps = {
+    ref: imageRef,
+    src: imageLoaded ? src : placeholderSrc,
+    alt: alt,
+    onLoad: handleImageLoad
+  }
+
+  if (id) {
+    imgProps.id = id
+  }
+
+  if (width && width !== 'auto') {
+    imgProps.width = width
+  }
+
+  if (height && height !== 'auto') {
+    imgProps.height = height
+  }
+  if (className) {
+    imgProps.className = className
+  }
+  if (style) {
+    imgProps.style = style
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img {...imgProps} />
+  )
+}
--- a/components/NotionIcon.js
+++ b/components/NotionIcon.js
@@ -1,3 +1,5 @@
+import LazyImage from './LazyImage'
+
 /**
 * notion的图标icon
 * 可能是emoji 可能是 svg 也可能是 图片
@@ -9,9 +11,7 @@ const NotionIcon = ({ icon }) => {
  }

  if (icon.startsWith('http') || icon.startsWith('data:')) {
-    //   return <Image src={icon} width={30} height={30}/>
-    //   eslint-disable-next-line @next/next/no-img-element
-    return <img src={icon} className='w-8 h-8 my-auto inline mr-1'/>
+    return <LazyImage src={icon} className='w-8 h-8 my-auto inline mr-1'/>
  }

  return <span className='mr-1'>{icon}</span>
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "notion-next",
-  "version": "4.0.1",
+  "version": "4.1.0",
  "homepage": "https://github.com/tangly1024/NotionNext.git",
  "license": "MIT",
  "repository": {
--- a/themes/fukasawa/components/ArticleDetail.js
+++ b/themes/fukasawa/components/ArticleDetail.js
@@ -6,6 +6,7 @@ import { useGlobal } from '@/lib/global'
 import Link from 'next/link'
 import ArticleAround from './ArticleAround'
 import { AdSlot } from '@/components/GoogleAdsense'
+import LazyImage from '@/components/LazyImage'

 /**
 *
@@ -23,8 +24,7 @@ export default function ArticleDetail(props) {
    <div id="container" className="max-w-5xl overflow-x-auto flex-grow mx-auto w-screen md:w-full ">
      {post?.type && !post?.type !== 'Page' && post?.pageCover && (
        <div className="w-full relative md:flex-shrink-0 overflow-hidden">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img alt={post.title} src={post?.pageCover} className='object-center w-full' />
+          <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
        </div>
      )}

--- a/themes/fukasawa/components/BlogCard.js
+++ b/themes/fukasawa/components/BlogCard.js
@@ -3,6 +3,7 @@ import Link from 'next/link'
 import TagItemMini from './TagItemMini'
 import React from 'react'
 import CONFIG_FUKA from '../config'
+import LazyImage from '@/components/LazyImage'

 const BlogCard = ({ index, post, showSummary, siteInfo }) => {
  const showPreview = CONFIG_FUKA.POST_LIST_PREVIEW && post.blockMap
@@ -26,12 +27,11 @@ const BlogCard = ({ index, post, showSummary, siteInfo }) => {
                {showPageCover && (
                    <div className="flex-grow mb-3 w-full duration-200 cursor-pointer transform overflow-hidden">
                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img
+                            <LazyImage
                                src={post?.pageCoverThumbnail}
                                alt={post?.title || BLOG.TITLE}
                                className="object-cover w-full h-full hover:scale-125 transform duration-500"
-                            ></img>
+                            />
                        </Link>
                    </div>
                )}
--- a/themes/gitbook/components/InfoCard.js
+++ b/themes/gitbook/components/InfoCard.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
 import React from 'react'
 import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
  return <div id='info-card' className='py-4'>
    <div className='items-center justify-center'>
        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
         </div>
        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
--- a/themes/gitbook/components/LogoBar.js
+++ b/themes/gitbook/components/LogoBar.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { useGitBookGlobal } from '@/themes/gitbook'
 import Link from 'next/link'

@@ -20,8 +21,7 @@ export default function LogoBar(props) {
                <i className={`fa-solid ${pageNavVisible ? 'fa-align-justify' : 'fa-indent'}`}></i>
            </div>
            <Link href='/' className='flex text-md md:text-xl dark:text-gray-200'>
-                {/*  eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
+                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-2 hidden md:block' />
                {siteInfo?.title}
            </Link>
        </div>
--- a/themes/heo/components/BlogPostCard.js
+++ b/themes/heo/components/BlogPostCard.js
@@ -2,6 +2,7 @@ import Link from 'next/link'
 import CONFIG from '../config'
 import BLOG from '@/blog.config'
 import TagItemMini from './TagItemMini'
+import LazyImage from '@/components/LazyImage'
 // import Image from 'next/image'

 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -19,7 +20,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                {showPageCover && (
                    <div className="w-full md:w-5/12 2xl:w-full overflow-hidden">
                        <Link href={`${BLOG.SUB_PATH}/${post.slug}`} passHref legacyBehavior>
-                            <div className={'h-60 bg-center bg-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'} style={{ backgroundImage: `url('${post?.pageCoverThumbnail}')` }} />
+                            <LazyImage src={post?.pageCoverThumbnail} alt={post?.title} className='h-60 w-full object-cover group-hover:scale-105 group-hover:brightness-75 transition-all duration-300'/>
                        </Link>
                    </div>
                )}
--- a/themes/heo/components/Hero.js
+++ b/themes/heo/components/Hero.js
@@ -2,6 +2,7 @@

 import BLOG from '@/blog.config'
 import { ArrowSmallRight, PlusSmall } from '@/components/HeroIcons'
+import LazyImage from '@/components/LazyImage'

 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -62,7 +63,7 @@ function Banner(props) {
    router.push(randomPost.slug)
  }

-  return <div id='banners' onClick={handleClickBanner} className="group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative hidden xl:flex xl:flex-col overflow-hidden">
+  return <div id='banners' onClick={handleClickBanner} className="hidden xl:flex xl:flex-col  group h-full bg-white dark:bg-[#1e1e1e] rounded-xl border dark:border-gray-700 mb-3 relative overflow-hidden">

        <div id='banner-title' className='flex flex-col absolute top-10 left-10'>
            <div className='text-4xl font-bold mb-3  dark:text-white'>{CONFIG.HERO_TITLE_1}<br />{CONFIG.HERO_TITLE_2}</div>
@@ -89,18 +90,17 @@ function Banner(props) {
 */
 function TagsGroupBar() {
  const groupIcons = CONFIG.GROUP_ICONS.concat(CONFIG.GROUP_ICONS)
+
  return (
-        <div className="tags-group-all flex -rotate-[30deg]">
+        <div className="tags-group-all flex -rotate-[30deg] ">
            <div className="tags-group-wrapper flex flex-nowrap absolute top-16">
                {groupIcons?.map((g, index) => {
                  return (<div key={index} className="tags-group-icon-pair ml-6 select-none">
                        <div style={{ background: g.color_1 }} className={'tags-group-icon w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={g.img_1} title={g.title_1} className='w-2/3' />
+                            <LazyImage src={g.img_1} title={g.title_1} className='w-2/3 hidden xl:block' />
                        </div>
                        <div style={{ background: g.color_2 }} className={'tags-group-icon  mt-5 w-28 h-28 rounded-3xl flex items-center justify-center text-white text-lg font-bold shadow-md'}>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={g.img_2} title={g.title_2} className='w-2/3' />
+                            <LazyImage src={g.img_2} title={g.title_2} className='w-2/3 hidden xl:block' />
                        </div>
                    </div>)
                })}
@@ -165,8 +165,7 @@ function TopGroup(props) {
                {latestPosts?.map((p, index) => {
                  return <Link href={`${BLOG.SUB_PATH}/${p?.slug}`} key={index}>
                        <div className='cursor-pointer h-[164px] group relative flex flex-col w-52 xl:w-full overflow-hidden shadow bg-white dark:bg-black dark:text-white rounded-xl'>
-                            {/* eslint-disable-next-line */}
-                            <img className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
+                            <LazyImage className='h-24 object-cover' alt={p?.title} src={p?.pageCoverThumbnail || siteInfo?.pageCover} />
                            <div className='group-hover:text-indigo-600 dark:group-hover:text-yellow-600 line-clamp-2 overflow-hidden m-2 font-semibold'>{p?.title}</div>
                            {/* hover 悬浮的 ‘荐’ 字 */}
                            <div className='opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0 duration-200 transition-all absolute -top-2 -left-2 bg-indigo-600 dark:bg-yellow-600  text-white rounded-xl overflow-hidden pr-2 pb-2 pl-4 pt-4 text-xs'>
--- a/themes/heo/components/InfoCard.js
+++ b/themes/heo/components/InfoCard.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import { ArrowRightCircle, GlobeAlt } from '@/components/HeroIcons'
+import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState } from 'react'
@@ -25,8 +26,7 @@ export function InfoCard(props) {
                {/* 问候语 */}
                <GreetingsWords />
                <div className={`${isSlugPage ? 'absolute right-0 -mt-8 -mr-5 hover:opacity-0 hover:scale-150 blur' : 'cursor-pointer'} justify-center items-center flex dark:text-gray-100 transform transitaion-all duration-200`}>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
+                    <LazyImage src={siteInfo?.icon} className='rounded-full' width={isSlugPage ? 100 : 28} alt={BLOG.AUTHOR} />
                </div>
            </div>

--- a/themes/heo/components/LatestPostsGroup.js
+++ b/themes/heo/components/LatestPostsGroup.js
@@ -1,5 +1,5 @@
 import BLOG from '@/blog.config'
-// import Image from 'next/image'
+import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'

 /**
@@ -27,8 +27,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                    className={'my-3 flex flex-col w-full'}>

                    <div className="w-full h-24 md:h-60 overflow-hidden relative rounded-lg mb-2">
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img src={`${headerImage}`} className='object-cover w-full h-full' />
+                        <LazyImage src={`${headerImage}`} className='object-cover w-full h-full' />
                    </div>

                    <div
--- a/themes/heo/components/LatestPostsGroupMini.js
+++ b/themes/heo/components/LatestPostsGroupMini.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
 import Link from 'next/link'
@@ -40,8 +41,7 @@ export default function LatestPostsGroupMini ({ latestPosts, siteInfo }) {
                    className={'my-3 flex'}>

                    <div className="w-20 h-14 overflow-hidden relative">
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={`${headerImage}`} className='object-cover w-full h-full rounded-lg'/>
+                            <LazyImage src={`${headerImage}`} className='object-cover w-full h-full rounded-lg'/>
                    </div>
                    <div
                        className={
--- a/themes/heo/components/Logo.js
+++ b/themes/heo/components/Logo.js
@@ -1,5 +1,6 @@
 import BLOG from '@/blog.config'
 import { Home } from '@/components/HeroIcons'
+import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import React from 'react'

@@ -8,8 +9,7 @@ const Logo = props => {
  return (
        <Link href='/' passHref legacyBehavior>
            <div className='flex flex-nowrap justify-center items-center cursor-pointer font-extrabold'>
-                {/*  eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
+                <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} className='mr-4 hidden md:block' />
                <div id='logo-text' className='group rounded-2xl flex-none relative'>
                    <div className='group-hover:opacity-0 opacity-100 visible group-hover:invisible text-lg my-auto rounded dark:border-white duration-200'>
                        {siteInfo?.title || BLOG.TITLE}
--- a/themes/heo/components/PaginationNumber.js
+++ b/themes/heo/components/PaginationNumber.js
@@ -98,7 +98,7 @@ const PaginationNumber = ({ page, totalPage }) => {
                  query: router.query.s ? { s: router.query.s } : {}
                }}
                rel="prev"
-                className={`${showPrev ? 'block' : 'hidden'} relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
+                className={`${showPrev ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
                {locale.PAGINATION.PREV}
            </Link>

@@ -111,7 +111,7 @@ const PaginationNumber = ({ page, totalPage }) => {
                  query: router.query.s ? { s: router.query.s } : {}
                }}
                rel="next"
-                className={`${+showNext ? 'block' : 'hidden'} relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
+                className={`${+showNext ? 'block' : 'hidden'} dark:text-white relative w-full flex-1 h-14 flex items-center transition-all duration-200 justify-center py-2 px-2 bg-white dark:bg-[#1e1e1e] border rounded-xl cursor-pointer`}>
                {locale.PAGINATION.NEXT}
            </Link>
        </div>
--- a/themes/heo/components/PostHeader.js
+++ b/themes/heo/components/PostHeader.js
@@ -4,6 +4,7 @@ import NotionIcon from '@/components/NotionIcon'
 import WavesArea from './WavesArea'
 import { HashTag } from '@/components/HeroIcons'
 import WordCount from '@/components/WordCount'
+import LazyImage from '@/components/LazyImage'

 export default function PostHeader({ post, siteInfo }) {
  if (!post) {
@@ -30,8 +31,7 @@ export default function PostHeader({ post, siteInfo }) {

                {/* 文章背景图 */}
                <div id='post-cover-wrapper' style={{ filter: 'blur(15px)' }} className='coverdiv lg:translate-x-96 opacity-50 lg:rotate-12'>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
+                    <LazyImage id='post-cover' className='w-full h-full object-cover opacity-80 max-h-[50rem] min-w-[50vw] min-h-[20rem]' src={headerImage} />
                </div>

                {/* 文章文字描述 */}
--- a/themes/heo/components/ReadingProgress.js
+++ b/themes/heo/components/ReadingProgress.js
@@ -13,7 +13,7 @@ export default function ReadingProgress() {
    const clientHeight = document.documentElement.clientHeight
    const scrollY = window.scrollY || window.pageYOffset

-    const percent = Math.floor((scrollY / (scrollHeight - clientHeight)) * 100)
+    const percent = Math.floor((scrollY / (scrollHeight - clientHeight - 20)) * 100)
    setScrollPercentage(percent)
  }

--- a/themes/heo/components/SideBar.js
+++ b/themes/heo/components/SideBar.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
 import { MenuListSide } from './MenuListSide'
@@ -20,7 +21,7 @@ const SideBar = (props) => {
                    <div onClick={() => { router.push('/') }}
                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
                    </div>
                    <MenuGroupCard {...props} />
                </div>
--- a/themes/heo/index.js
+++ b/themes/heo/index.js
@@ -30,6 +30,7 @@ import { HashTag } from '@/components/HeroIcons'
 import LatestPostsGroup from './components/LatestPostsGroup'
 import FloatTocButton from './components/FloatTocButton'
 import replaceSearchResult from '@/components/Mark'
+import LazyImage from '@/components/LazyImage'

 /**
 * 基础布局 采用上中下布局，移动端使用顶部侧边导航栏
@@ -321,8 +322,7 @@ const Layout404 = props => {
                        {/* 404卡牌 */}
                        <div className='error-content flex flex-col md:flex-row w-full mt-12 h-[30rem] md:h-96 justify-center items-center bg-white border rounded-3xl'>
                            {/* 左侧动图 */}
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></img>
+                            <LazyImage className="error-img h-60 md:h-full p-4" src={'https://bu.dusays.com/2023/03/03/6401a7906aa4a.gif'}></LazyImage>

                            {/* 右侧文字 */}
                            <div className='error-info flex-1 flex flex-col justify-center items-center space-y-4'>
--- a/themes/hexo/components/InfoCard.js
+++ b/themes/hexo/components/InfoCard.js
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
+import LazyImage from '@/components/LazyImage'

 /**
 * 社交信息卡
@@ -21,7 +22,7 @@ export function InfoCard(props) {
                }}
            >
                {/* eslint-disable-next-line @next/next/no-img-element */}
-                <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
+                <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR} />
            </div>
            <div className='font-medium text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
            <div className='text-sm text-center'>{BLOG.BIO}</div>
--- a/themes/hexo/components/LatestPostsGroup.js
+++ b/themes/hexo/components/LatestPostsGroup.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { useGlobal } from '@/lib/global'
 // import Image from 'next/image'
 import Link from 'next/link'
@@ -40,16 +41,7 @@ const LatestPostsGroup = ({ latestPosts, siteInfo }) => {
                    className={'my-3 flex'}>

                    <div className="w-20 h-14 overflow-hidden relative">
-                          {/* <Image
-                            src={headerImage}
-                            fill
-                            style={{ objectFit: 'cover' }}
-                            placeholder='blur'
-                            blurDataURL='/bg_image.jpg'
-                            quality={10}
-                            alt={post.title} /> */}
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={`${headerImage}`} className='object-cover w-full h-full'/>
+                        <LazyImage src={`${headerImage}`} className='object-cover w-full h-full'/>
                    </div>
                    <div
                        className={
--- a/themes/hexo/components/SideBar.js
+++ b/themes/hexo/components/SideBar.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { useRouter } from 'next/router'
 import MenuGroupCard from './MenuGroupCard'
 import { MenuListSide } from './MenuListSide'
@@ -19,8 +20,7 @@ const SideBar = (props) => {
                <div>
                    <div onClick={() => { router.push('/') }}
                        className='justify-center items-center flex hover:rotate-45 py-6 hover:scale-105 dark:text-gray-100  transform duration-200 cursor-pointer'>
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
+                        <LazyImage src={siteInfo?.icon} className='rounded-full' width={80} alt={BLOG.AUTHOR} />
                    </div>
                    <MenuGroupCard {...props} />
                </div>
--- a/themes/landing/components/Features.js
+++ b/themes/landing/components/Features.js
@@ -4,6 +4,7 @@
 import { useState, useRef, useEffect } from 'react'
 import { Transition } from '@headlessui/react'
 import CONFIG from '../config'
+import LazyImage from '@/components/LazyImage'
 // import FeaturesElement from '@/public/images/features-element.png'

 export default function Features() {
@@ -113,9 +114,7 @@ export default function Features() {
                    unmount={false}
                  >
                    <div className="relative inline-flex flex-col">
-                      {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" /> */}
-                      {/* <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
-                      <img src='/images/feature-1.webp'></img>
+                      <LazyImage src='/images/feature-1.webp'/>
                    </div>

                  </Transition>
@@ -136,7 +135,7 @@ export default function Features() {
                    <div className="relative inline-flex flex-col">
                        {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
                        <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
-                        <img src='/images/feature-2.webp'></img>
+                        <LazyImage src='/images/feature-2.webp'/>
                    </div>
                  </Transition>
                  {/* Item 3 */}
@@ -156,7 +155,7 @@ export default function Features() {
                    <div className="relative inline-flex flex-col">
                      {/* <Image className="md:max-w-none mx-auto rounded" src={FeaturesBg} width={500} height="462" alt="Features bg" />
                      <Image className="md:max-w-none absolute w-full left-0 transform animate-float" src={FeaturesElement} width={500} height="44" alt="Element" style={{ top: '30%' }} /> */}
-                        <img src='/images/feature-3.webp'></img>
+                        <LazyImage src='/images/feature-3.webp'/>
                    </div>
                  </Transition>
                </div>
--- a/themes/landing/components/ModalVideo.js
+++ b/themes/landing/components/ModalVideo.js
@@ -3,6 +3,7 @@
 import { useState, useRef, Fragment } from 'react'
 import { Dialog, Transition } from '@headlessui/react'
 import CONFIG from '../config'
+import LazyImage from '@/components/LazyImage'

 export default function ModalVideo({
  thumb,
@@ -23,8 +24,7 @@ export default function ModalVideo({
            <div>
                <div className="relative flex justify-center mb-8" data-aos="zoom-y-out" data-aos-delay="450">
                    <div className="flex flex-col justify-center">
-                        {/* eslint-disable-next-line @next/next/no-img-element */}
-                        <img src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
+                        <LazyImage src={thumb} width={thumbWidth} height={thumbHeight} alt={thumbAlt} />
                        <svg className="absolute inset-0 max-w-full mx-auto md:max-w-none h-auto" width="768" height="432" viewBox="0 0 768 432" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink">
                            <defs>
                                <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="hero-ill-a">
--- a/themes/landing/components/Testimonials.js
+++ b/themes/landing/components/Testimonials.js
@@ -1,7 +1,7 @@
-/* eslint-disable @next/next/no-img-element */
 // import Image from 'next/image'
 // import TestimonialImage from '@/public/images/testimonial.jpg'

+import LazyImage from '@/components/LazyImage'
 import CONFIG from '../config'

 export default function Testimonials() {
@@ -44,7 +44,7 @@ export default function Testimonials() {
                                    <svg className="absolute top-0 right-0 -mt-3 -mr-8 w-16 h-16 fill-current text-blue-500" viewBox="0 0 64 64" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M37.89 58.338c-2.648-5.63-3.572-10.045-2.774-13.249.8-3.203 8.711-13.383 23.737-30.538l2.135.532c-6.552 10.033-10.532 17.87-11.939 23.515-.583 2.34.22 6.158 2.41 11.457l-13.57 8.283zm-26.963-6.56c-2.648-5.63-3.572-10.046-2.773-13.25.799-3.203 8.71-13.382 23.736-30.538l2.136.533c-6.552 10.032-10.532 17.87-11.94 23.515-.583 2.339.22 6.158 2.41 11.456l-13.57 8.283z" />
                                    </svg>
-                                    <img className="relative rounded-full w-20 h-20 object-cover" src={CONFIG.TESTIMONIALS_AVATAR} alt="Testimonial 01" />
+                                    <LazyImage className="relative rounded-full w-20 h-20 object-cover" src={CONFIG.TESTIMONIALS_AVATAR} alt="Testimonial 01" />
                                </div>
                                <blockquote className="text-xl font-medium mb-4">
                                    {CONFIG.TESTIMONIALS_WORD}
--- a/themes/matery/components/BlogPostCard.js
+++ b/themes/matery/components/BlogPostCard.js
@@ -4,6 +4,7 @@ import React from 'react'
 import TagItemMini from './TagItemMini'
 import CONFIG from '../config'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
+import LazyImage from '@/components/LazyImage'
 // import Image from 'next/image'

 const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
@@ -32,7 +33,7 @@ const BlogPostCard = ({ index, post, showSummary, siteInfo }) => {
                        <div
                            className="flex flex-grow w-full relative duration-200 bg-black rounded-t-md  cursor-pointer transform overflow-hidden">
                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img
+                            <LazyImage
                                src={post?.pageCoverThumbnail}
                                alt={post.title}
                                className="opacity-50 h-full w-full hover:scale-125 rounded-t-md  transform object-cover duration-500"
--- a/themes/matery/components/InfoCard.js
+++ b/themes/matery/components/InfoCard.js
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router'
 import Card from './Card'
 import SocialButton from './SocialButton'
 import MenuGroupCard from './MenuGroupCard'
+import LazyImage from '@/components/LazyImage'
 export function InfoCard (props) {
  const { className, siteInfo } = props
  const router = useRouter()
@@ -13,8 +14,7 @@ export function InfoCard (props) {
        router.push('/')
      }}
    >
-    {/* eslint-disable-next-line @next/next/no-img-element */}
-    <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+    <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
    </div>
    <div className='text-center text-xl pb-4'>{BLOG.AUTHOR}</div>
    <div className='text-sm text-center'>{BLOG.BIO}</div>
--- a/themes/matery/components/PostHeader.js
+++ b/themes/matery/components/PostHeader.js
@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import LazyImage from '@/components/LazyImage'

 /**
 * 文章背景图
@@ -8,17 +8,11 @@ export default function PostHeader({ post, siteInfo }) {
  const title = post?.title
  return (
        <div id='header' className="flex h-96 justify-center align-middle items-center w-full relative bg-black">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            {/* <img
-                src={headerImage}
-                alt={title}
-                className="opacity-50 dark:opacity-40 h-full w-full object-cover"
-            /> */}
-            <Image alt={title} src={headerImage} fill style={{ objectFit: 'cover' }} className='opacity-50'
-                placeholder='blur' blurDataURL='/bg_image.jpg' />
-            <div className="leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
+            <div className="z-10 leading-snug font-bold xs:text-4xl sm:text-4xl md:text-5xl md:leading-snug text-4xl shadow-text-md flex justify-center text-center text-white">
                {title}
            </div>
+            <LazyImage alt={title} src={headerImage} className='pointer-events-none select-none w-full h-full object-cover opacity-30 absolute'
+                placeholder='blur' blurDataURL='/bg_image.jpg' />
        </div>
  )
 }
--- a/themes/matery/components/SideBar.js
+++ b/themes/matery/components/SideBar.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import { MenuListSide } from './MenuListSide'

 /**
@@ -15,8 +16,7 @@ const SideBar = (props) => {
      <div id='side-bar'>
          <div className="mh-48 w-full bg-indigo-700">
              <div className='mx-5 pt-6 pb-2'>
-                  {/* eslint-disable-next-line @next/next/no-img-element */}
-                  <img src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
+                  <LazyImage src={siteInfo?.icon} className='cursor-pointer rounded-full' width={80} alt={BLOG.AUTHOR} />
                  <div className='text-white text-xl my-1'>{siteInfo?.title}</div>
                  <div className='text-xs my-1 text-gray-300'>{siteInfo?.description}</div>
              </div>
--- a/themes/medium/components/ArticleInfo.js
+++ b/themes/medium/components/ArticleInfo.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import formatDate from '@/lib/formatDate'
 import Link from 'next/link'

@@ -28,8 +29,7 @@ export default function ArticleInfo(props) {
            </div>
            <Link href="/about" passHref legacyBehavior>
                <div className='flex pt-2'>
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />
+                    <LazyImage src={siteInfo?.icon} className='rounded-full cursor-pointer' width={22} alt={BLOG.AUTHOR} />

                    <div className="mr-3 ml-2 my-auto text-green-500 cursor-pointer">
                        {BLOG.AUTHOR}
--- a/themes/medium/components/BlogPostCard.js
+++ b/themes/medium/components/BlogPostCard.js
@@ -7,6 +7,7 @@ import CONFIG from '../config'
 import CategoryItem from './CategoryItem'
 import TagItemMini from './TagItemMini'
 import TwikooCommentCount from '@/components/TwikooCommentCount'
+import LazyImage from '@/components/LazyImage'

 const BlogPostCard = ({ post, showSummary }) => {
  const showPreview = CONFIG.POST_LIST_PREVIEW && post.blockMap
@@ -30,8 +31,7 @@ const BlogPostCard = ({ post, showSummary }) => {
                    }>
                    <div>
                        {CONFIG.POST_LIST_COVER && <div className='w-full max-h-96 object-cover overflow-hidden mb-2'>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
+                            <LazyImage src={post.pageCoverThumbnail} className='w-full max-h-96 object-cover hover:scale-125 duration-150' />
                        </div>}
                        {post.title}
                    </div>
--- a/themes/medium/components/InfoCard.js
+++ b/themes/medium/components/InfoCard.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
 import React from 'react'
 import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
  return <div id='info-card' className='py-4'>
    <div className='items-center justify-center'>
        <div className='hover:scale-105 transform duration-200 cursor-pointer flex justify-center' onClick={ () => { Router.push('/about') }}>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+            <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
         </div>
        <div className='text-xl py-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-300'>{BLOG.AUTHOR}</div>
        <div className='font-light text-gray-600 mb-2 hover:scale-105 transform duration-200 flex justify-center dark:text-gray-400'>{BLOG.BIO}</div>
--- a/themes/next/components/ArticleDetail.js
+++ b/themes/next/components/ArticleDetail.js
@@ -12,6 +12,7 @@ import WordCount from './WordCount'
 import NotionPage from '@/components/NotionPage'
 import CONFIG from '../config'
 import NotionIcon from '@/components/NotionIcon'
+import LazyImage from '@/components/LazyImage'

 /**
 *
@@ -39,8 +40,7 @@ export default function ArticleDetail(props) {
                    {/* 头图 */}
                    {CONFIG.POST_HEADER_IMAGE_VISIBLE && post?.type && !post?.type !== 'Page' && post?.pageCover && (
                        <div className="w-full relative md:flex-shrink-0 overflow-hidden">
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img alt={post.title} src={post?.pageCover} className='object-center w-full' />
+                            <LazyImage alt={post.title} src={post?.pageCover} className='object-center w-full' />
                        </div>
                    )}

--- a/themes/next/components/InfoCard.js
+++ b/themes/next/components/InfoCard.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import Router from 'next/router'
 import React from 'react'
 import SocialButton from './SocialButton'
@@ -8,8 +9,7 @@ const InfoCard = (props) => {
  return <>
    <div className='flex flex-col items-center justify-center '>
        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer' onClick={ () => { Router.push('/') }}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
+        <LazyImage src={siteInfo?.icon} className='rounded-full' width={120} alt={BLOG.AUTHOR}/>
        </div>
        <div className='text-2xl font-serif dark:text-white py-2 hover:scale-105 transform duration-200'>{BLOG.AUTHOR}</div>
        <div className='font-light dark:text-white py-2 hover:scale-105 transform duration-200 text-center'>{BLOG.BIO}</div>
--- a/themes/nobelium/components/Nav.js
+++ b/themes/nobelium/components/Nav.js
@@ -7,6 +7,7 @@ import { SvgIcon } from './SvgIcon'
 import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
+import LazyImage from '@/components/LazyImage'

 const Nav = props => {
  const { navBarTitle, fullWidth, siteInfo } = props
@@ -47,8 +48,7 @@ const Nav = props => {
                    <div className="h-6 w-6">
                        {/* <SvgIcon/> */}
                        {CONFIG.NAV_NOTION_ICON
-                        /* eslint-disable-next-line @next/next/no-img-element */
-                          ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                          ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
                          : <SvgIcon />}

                    </div>
--- a/themes/plog/components/BlogPost.js
+++ b/themes/plog/components/BlogPost.js
@@ -2,6 +2,7 @@ import { compressImage } from '@/lib/notion/mapImage'
 import Link from 'next/link'
 import { usePlogGlobal } from '..'
 import { isMobile } from '@/lib/utils'
+import LazyImage from '@/components/LazyImage'

 /**
 * 博客照片卡牌
@@ -32,8 +33,9 @@ const BlogPost = (props) => {
            data-aos-once="true"
            data-aos-anchor-placement="top-bottom"
            key={post?.id} className='cursor-pointer relative'>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
+
+            <LazyImage src={pageThumbnail} className='aspect-[16/9] w-full h-full object-cover filter contrast-120' />
+
            <h2 className="text-md absolute left-0 bottom-0 m-4 text-black dark:text-gray-100 text-shadow">
                {post?.title}
            </h2>
@@ -42,6 +44,7 @@ const BlogPost = (props) => {
                {post?.category}
                </Link>
            </div>}
+
        </article>

  )
--- a/themes/plog/components/LogoBar.js
+++ b/themes/plog/components/LogoBar.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import CONFIG from '../config'
 import { SvgIcon } from './SvgIcon'
@@ -14,10 +15,8 @@ export default function LogoBar(props) {
  return <div className="flex items-center">
    <Link href="/" aria-label={BLOG.title}>
        <div className="h-6 w-6">
-            {/* <SvgIcon/> */}
            {CONFIG.NAV_NOTION_ICON
-            /* eslint-disable-next-line @next/next/no-img-element */
-              ? <img src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
+              ? <LazyImage src={siteInfo?.icon} className='rounded-full' width={24} height={24} alt={BLOG.AUTHOR} />
              : <SvgIcon />}
        </div>
    </Link>
--- a/themes/plog/components/Modal.js
+++ b/themes/plog/components/Modal.js
@@ -4,6 +4,7 @@ import { usePlogGlobal } from '..'
 import { ArrowPath, ChevronLeft, ChevronRight } from '@/components/HeroIcons'
 import Link from 'next/link'
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'

 /**
 * 弹出框
@@ -31,23 +32,23 @@ export default function Modal(props) {

  // 修改当前显示的遮罩内容
  function prev() {
+    setLoading(true)
    const index = posts.findIndex(post => post.slug === modalContent.slug)
    if (index === 0) {
      setModalContent(posts[posts.length - 1])
    } else {
      setModalContent(posts[index - 1])
    }
-    setLoading(true)
  }
  // 下一个
  const next = () => {
+    setLoading(true)
    const index = posts.findIndex(post => post.slug === modalContent.slug)
    if (index === posts.length - 1) {
      setModalContent(posts[0])
    } else {
      setModalContent(posts[index + 1])
    }
-    setLoading(true)
  }

  return (
@@ -84,8 +85,7 @@ export default function Modal(props) {
                                </div>

                                {/* 添加onLoad事件处理函数 */}
-                                {/* eslint-disable-next-line @next/next/no-img-element */}
-                                <img src={img} ref={imgRef} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} onLoad={handleImageLoad} style={{ display: loading ? 'none' : 'block' }} />
+                                <LazyImage onLoad={handleImageLoad} src={img} ref={imgRef} style={{ display: loading ? 'none' : 'block' }} className={`w-full max-w-7xl max-h-[90vh] shadow-xl ${!loading ? ' animate__animated animate__fadeIn' : ''}`} />

                                {!loading && (<>
                                    <div className='absolute bottom-0 left-0 m-4 z-20'>
--- a/themes/plog/components/Nav.js
+++ b/themes/plog/components/Nav.js
@@ -7,6 +7,7 @@ import { SvgIcon } from './SvgIcon'
 import { MenuItemDrop } from './MenuItemDrop'
 import Collapse from '@/components/Collapse'
 import { MenuItemCollapse } from './MenuItemCollapse'
+import LazyImage from '@/components/LazyImage'

 const Header = props => {
  const { fullWidth, siteInfo } = props
@@ -22,8 +23,7 @@ const Header = props => {
                        <div className="h-6 w-6">
                            {/* <SvgIcon/> */}
                            {CONFIG.NAV_NOTION_ICON
-                            /* eslint-disable-next-line @next/next/no-img-element */
-                              ? <img src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
+                              ? <LazyImage src={siteInfo?.icon} width={24} height={24} alt={BLOG.AUTHOR} />
                              : <SvgIcon />}

                        </div>
--- a/themes/simple/components/Header.js
+++ b/themes/simple/components/Header.js
@@ -1,4 +1,5 @@
 import BLOG from '@/blog.config'
+import LazyImage from '@/components/LazyImage'
 import Link from 'next/link'
 import CONFIG from '../config'
 import SocialButton from './SocialButton'
@@ -17,12 +18,9 @@ export const Header = (props) => {
            <div className="float-none inline-block py-12">
                <Link href='/'>
                    {/* 可使用一张单图作为logo */}
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    {/* <img className='max-h-48 hover:opacity-60 duration-200 transition-all cursor-pointer' src={CONFIG.LOGO_IMG}/> */}
                    <div className='flex space-x-6'>
                        <div className='hover:rotate-45 hover:scale-125 transform duration-200 cursor-pointer'>
-                            {/* eslint-disable-next-line @next/next/no-img-element */}
-                            <img src={avatar} className='rounded-full' width={130} height={130} alt={BLOG.AUTHOR} />
+                            <LazyImage src={avatar} className='rounded-full' width={130} height={130} alt={BLOG.AUTHOR} />
                        </div>

                        <div className='flex-col flex justify-center'>