d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-06-06 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

优化字体预渲染

Browse Source
This commit is contained in:
tangly1024.com
2023-07-21 14:16:14 +08:00
parent 32b7747d74
commit 4b6c045237
4 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/LazyImage.js
View File

@@ -1,18 +1,19 @@
import Head from 'next/head'
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>
)
/**
@@ -42,17 +43,6 @@ export default function LazyImage({
}
}
// 预加载图片
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) => {
@@ -103,8 +93,12 @@ export default function LazyImage({
if (style) {
imgProps.style = style
}
return (
// eslint-disable-next-line @next/next/no-img-element
<img {...imgProps} />
)
return (<>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img {...imgProps} />
{/* 预加载 */}
{priority && <Head>
<link rel='preload' as='image' src={src} />
</Head>}
</>)
}