feat: 博文图片预加载

Author: coderz-w

markdown/output.json

@@ -12,8 +12,12 @@
       "text": "记录一下建站的第一天,也许开心到爆炸.\r\n![建站图片](https://upload-bbs.miyoushe.com/upload/2024/07/27/75276539/98580c852764d70e5a9597aa7678f131_2245446554692880272.jpg)\r\n![建站图片](https://upload-bbs.miyoushe.com/upload/2024/03/20/285532152/757fa74f8b38fdfab0bd1b653a69af4d_6553329811603610700.gif)",
       "count": "268",
       "readingTime": "1 ",
+      "imageUrls": [
+        "https://upload-bbs.miyoushe.com/upload/2024/07/27/75276539/98580c852764d70e5a9597aa7678f131_2245446554692880272.jpg",
+        "https://upload-bbs.miyoushe.com/upload/2024/03/20/285532152/757fa74f8b38fdfab0bd1b653a69af4d_6553329811603610700.gif"
+      ],
       "createdAt": "2024-11-13T12:48:31.000Z",
-      "updatedAt": "2024-11-13T12:52:18.000Z",
+      "updatedAt": "2024-11-13T13:01:51.000Z",
       "modified": true
     }
   },
@@ -30,8 +34,12 @@
       "text": "记录一下建站的第一天,也许开心到爆炸.\r\n![建站图片](https://upload-bbs.miyoushe.com/upload/2024/07/27/75276539/98580c852764d70e5a9597aa7678f131_2245446554692880272.jpg)\r\n![建站图片](https://upload-bbs.miyoushe.com/upload/2024/03/20/285532152/757fa74f8b38fdfab0bd1b653a69af4d_6553329811603610700.gif)",
       "count": "268",
       "readingTime": "1 ",
+      "imageUrls": [
+        "https://upload-bbs.miyoushe.com/upload/2024/07/27/75276539/98580c852764d70e5a9597aa7678f131_2245446554692880272.jpg",
+        "https://upload-bbs.miyoushe.com/upload/2024/03/20/285532152/757fa74f8b38fdfab0bd1b653a69af4d_6553329811603610700.gif"
+      ],
       "createdAt": "2024-11-13T12:48:31.000Z",
-      "updatedAt": "2024-11-13T12:52:18.000Z",
+      "updatedAt": "2024-11-13T13:01:51.000Z",
       "modified": true
     }
   ]

src/app/(app)/projects/page.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import Image from 'next/image';
+import Link from 'next/link';
 
 import { GitHubBrandIcon } from '@/components/icons/platform/GitHubBrandIcon';
 import { cn } from '@/lib/helper';
 import { ProjectModel, projectList } from '~/index';
-import { PrefetchLink } from '@/components/modules/shared/PrefetchLink';
 
 export default function Projects() {
   return (
@@ -41,7 +41,7 @@ const ProjectCardList = ({ data }: { data: ProjectModel[] }) => (
 );
 const ProjectCard = ({ project }: { project: ProjectModel }) => {
   return (
-    <PrefetchLink
+    <Link
       href={project.url}
       key={project.id}
       className="group flex shrink-0 grid-cols-[60px_2fr] flex-col items-center gap-4 md:grid"
@@ -59,7 +59,7 @@ const ProjectCard = ({ project }: { project: ProjectModel }) => {
           {project.desc}
         </span>
       </span>
-    </PrefetchLink>
+    </Link>
   );
 };
 

src/components/layout/Footer/Footer.tsx

@@ -13,14 +13,14 @@ const Footer = () => {
         <div className="relative mx-auto max-w-7xl lg:px-8 h-full flex flex-row items-center justify-around">
           <div className=" flex items-center gap-x-4 font-mono">
             <span className="">
-              <PrefetchLink href={'/'}>
+              <PrefetchLink href={'/about'}>
                 <span className=" relative before:content-[''] before:absolute before:bottom-[-2px] before:w-[0px] hover:before:w-[100%] before:h-[1px] before:bg-[var(--accent-color)] before:transition-all before:duration-300">
                   关于我
                 </span>
               </PrefetchLink>
             </span>
             <span className="">
-              <Link href={'/'}>
+              <Link href={'https://github.com/coderz-w/blog'}>
                 <span className=" relative before:content-[''] before:absolute before:bottom-[-2px] before:w-[0px] hover:before:w-[100%] before:h-[1px] before:bg-[var(--accent-color)] before:transition-all before:duration-300">
                   此项目
                 </span>

src/components/modules/list/PostItem.tsx

@@ -14,6 +14,7 @@ export const PostItem = memo<{ data: PostItemType }>(function PostItem({ data })
   return (
     <PrefetchLink
       href={postLink}
+      preFetchImages={data.imageUrls}
       className="relative flex flex-col py-8 focus-visible:!shadow-none gap-2"
     >
       <PostItemHoverOverlay />

src/components/modules/shared/PrefetchLink.tsx

@@ -1,22 +1,73 @@
 'use client';
 
 import Link from 'next/link';
-import { useState, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+
+const loadedImages = new Set<string>();
 
 interface PrefetchLinkProps extends React.ComponentProps<typeof Link> {
   href: string;
+  preFetchImages: string[];
 }
 
-export const PrefetchLink: React.FC<PrefetchLinkProps> = ({ href, children, ...props }) => {
-  const [prefetch, setPrefetch] = useState(false);
-
-  const handleMouseEnter = useCallback(() => {
-    setPrefetch(true);
-  }, []);
+export const PrefetchLink: React.FC<PrefetchLinkProps> = ({
+  href,
+  preFetchImages,
+  children,
+  ...props
+}) => {
+  const [preloading, setPreloading] = useState<(() => void)[]>([]);
+  const router = useRouter();
 
   return (
-    <Link href={href} prefetch={prefetch} onMouseEnter={handleMouseEnter} {...props}>
+    <Link
+      href={href}
+      prefetch={false}
+      onMouseEnter={() => {
+        router.prefetch(href);
+        if (!preFetchImages || preFetchImages.length < 1) return;
+
+        const p: (() => void)[] = [];
+
+        for (const image of preFetchImages) {
+          const remove = prefetchImage(image);
+          if (remove) p.push(remove);
+        }
+
+        setPreloading(p);
+      }}
+      onMouseLeave={() => {
+        for (const remove of preloading) {
+          remove();
+        }
+
+        setPreloading([]);
+      }}
+      {...props}
+    >
       {children}
     </Link>
   );
 };
+
+function prefetchImage(image: string) {
+  if (loadedImages.has(image)) return;
+
+  const img = new Image();
+  img.decoding = 'async';
+  img.fetchPriority = 'low';
+  img.src = image;
+
+  let done = false;
+
+  img.onload = img.onerror = () => {
+    done = true;
+    loadedImages.add(image);
+  };
+
+  return () => {
+    if (done) return;
+    img.src = '';
+  };
+}

src/components/ui/focus-cards.tsx/FocusCards.tsx

@@ -1,12 +1,12 @@
 'use client';
 
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 
 import { cn } from '@/lib/helper';
-import type { PostItem as PostItemType } from '@/core';
 import dayjs from '@/lib/dayjs';
+import type { PostItem as PostItemType } from '@/core';
+import { PrefetchLink } from '@/components/modules/shared/PrefetchLink';
 
 export const Card = React.memo(
   ({
@@ -20,14 +20,12 @@ export const Card = React.memo(
     hovered: number | null;
     setHovered: React.Dispatch<React.SetStateAction<number | null>>;
   }) => {
-    const router = useRouter();
     const postLink = `/notes/${card.path}`;
 
     return (
-      <div
-        onClick={useCallback(() => {
-          router.push(postLink);
-        }, [])}
+      <PrefetchLink
+        href={postLink}
+        preFetchImages={card.imageUrls}
         className={cn(
           'rounded-lg relative bg-gray-100 dark:bg-neutral-900 overflow-hidden h-60 md:h-96 w-full transition-all duration-300 ease-out cursor-pointer',
           hovered !== null && hovered !== index && 'blur-sm scale-[0.98]',
@@ -70,7 +68,7 @@ export const Card = React.memo(
             </div>
           </div>
         </div>
-      </div>
+      </PrefetchLink>
     );
   },
 );

src/core/index.ts

@@ -19,6 +19,7 @@ export type PostItem = {
   modified: boolean;
   coverImage: string;
   summary?: string;
+  imageUrls: string[];
 };
 
 export type PostJsonType = {
@@ -32,6 +33,8 @@ export type PostJsonType = {
 
 export type PostMap = Record<string, PostItem>;
 
+const imgRegex = /!\[.*?\]\((http[s]?:\/\/[^\s\)]+\.(?:jpg|jpeg|png|gif|bmp|svg|webp|tiff|ico))\)/g;
+
 export function importMarkdownFile(path: string) {
   const markdownContext = (require as any).context('../../markdown', true, /\.md$/);
 
@@ -64,6 +67,12 @@ export function buildPostData() {
     const file = importMarkdownFile(`./${path}`);
     const createdAt = getFirstGitCommitTime(join('markdown/', path));
     const updatedAt = getLastGitUpdateTime(join('markdown/', path));
+    let match;
+    const imageUrls = [];
+
+    while ((match = imgRegex.exec(file)) !== null) {
+      imageUrls.push(match[1]);
+    }
 
     const postItem: PostItem = {
       authors,
@@ -76,6 +85,7 @@ export function buildPostData() {
       text: file,
       count: symbolsCount(file),
       readingTime: symbolsTime(file, 0, 200),
+      imageUrls: imageUrls,
       createdAt,
       updatedAt,
       modified: updatedAt && createdAt ? updatedAt.getTime() !== createdAt.getTime() : false,