Skip to content

Commit f037a41

Browse files
tangly1024tangly1024
authored
Merge pull request tangly1024#2411 from tangly1024/feat/optimizing-image-loading-for-mobile-devices
Feat/optimizing image loading for mobile devices
2 parents 265a828 + 61a719d commit f037a41

File tree

4 files changed

+78
-26
lines changed

4 files changed

+78
-26
lines changed

‎components/LazyImage.js

+52-17
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { siteConfig } from '@/lib/config'
22
import Head from 'next/head'
3-
import React, { useEffect, useRef, useState } from 'react'
4-
3+
import { useEffect, useRef, useState } from 'react'
54
/**
65
* 图片懒加载
76
* @param {*} param0
@@ -20,26 +19,35 @@ export default function LazyImage({
2019
onLoad,
2120
style
2221
}) {
22+
const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
2323
const imageRef = useRef(null)
24-
const [imageLoaded, setImageLoaded] = useState(false)
24+
const [adjustedSrc, setAdjustedSrc] = useState(
25+
placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
26+
)
27+
2528
if (!placeholderSrc) {
2629
placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
2730
}
2831

32+
/**
33+
* 图片加载成功回调
34+
*/
2935
const handleImageLoad = () => {
30-
setImageLoaded(true)
3136
if (typeof onLoad === 'function') {
3237
onLoad() // 触发传递的onLoad回调函数
3338
}
3439
}
3540

3641
useEffect(() => {
42+
const adjustedImageSrc = adjustImgSize(src, maxWidth)
43+
setAdjustedSrc(adjustedImageSrc)
44+
3745
const observer = new IntersectionObserver(
38-
(entries) => {
39-
entries.forEach((entry) => {
46+
entries => {
47+
entries.forEach(entry => {
4048
if (entry.isIntersecting) {
4149
const lazyImage = entry.target
42-
lazyImage.src = src
50+
lazyImage.src = adjustedImageSrc
4351
observer.unobserve(lazyImage)
4452
}
4553
})
@@ -56,12 +64,12 @@ export default function LazyImage({
5664
observer.unobserve(imageRef.current)
5765
}
5866
}
59-
}, [src])
67+
}, [src, maxWidth])
6068

6169
// 动态添加width、height和className属性，仅在它们为有效值时添加
6270
const imgProps = {
6371
ref: imageRef,
64-
src: imageLoaded ? src : placeholderSrc,
72+
src: priority ? adjustedSrc : placeholderSrc,
6573
alt: alt,
6674
onLoad: handleImageLoad
6775
}
@@ -87,12 +95,39 @@ export default function LazyImage({
8795
if (style) {
8896
imgProps.style = style
8997
}
90-
return (<>
91-
{/* eslint-disable-next-line @next/next/no-img-element */}
92-
<img {...imgProps} />
93-
{/* 预加载 */}
94-
{priority && <Head>
95-
<link rel='preload' as='image' src={src} />
96-
</Head>}
97-
</>)
98+
return (
99+
<>
100+
{/* eslint-disable-next-line @next/next/no-img-element */}
101+
<img {...imgProps} />
102+
{/* 预加载 */}
103+
{priority && (
104+
<Head>
105+
<link rel='preload' as='image' href={adjustedSrc} />
106+
</Head>
107+
)}
108+
</>
109+
)
110+
}
111+
/**
112+
* 根据窗口尺寸决定压缩图片宽度
113+
* @param {*} src
114+
* @param {*} maxWidth
115+
* @returns
116+
*/
117+
118+
const adjustImgSize = (src, maxWidth) => {
119+
if (!src) {
120+
return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
121+
}
122+
const screenWidth = window.screen.width
123+
124+
// 屏幕尺寸大于默认图片尺寸，没必要再压缩
125+
if (screenWidth > maxWidth) {
126+
return src
127+
}
128+
129+
// 正则表达式，用于匹配 URL 中的 width 参数
130+
const widthRegex = /width=\d+/
131+
// 使用正则表达式替换 width 参数
132+
return src.replace(widthRegex, `width=${screenWidth}`)
98133
}

‎components/NotionPage.js

+10-7
Original file line numberDiff line numberDiff line change
@@ -211,13 +211,16 @@ const Equation = dynamic(
211211
{ ssr: false }
212212
)
213213

214-
// 文档
215-
const Pdf = dynamic(
216-
() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
217-
{
218-
ssr: false
219-
}
220-
)
214+
// 原版文档
215+
// const Pdf = dynamic(
216+
// () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
217+
// {
218+
// ssr: false
219+
// }
220+
// )
221+
const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
222+
ssr: false
223+
})
221224

222225
// 美化代码 from: https://github.com/txs
223226
const PrismMac = dynamic(() => import('@/components/PrismMac'), {

‎components/Pdf.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* 渲染pdf
3+
* 直接用googledocs预览pdf
4+
* @param {*} file
5+
* @returns
6+
*/
7+
export function Pdf({ file }) {
8+
const src =
9+
'https://docs.google.com/viewer?embedded=true&url=' +
10+
encodeURIComponent(file)
11+
return (
12+
<embed src={src} type='application/pdf' width='100%' height='100%'></embed>
13+
)
14+
}

‎styles/notion.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
19761976
/* color: var(--notion-gray); */
19771977
}
19781978

1979-
.notion-asset-wrapper-pdf > div {
1979+
/* .notion-asset-wrapper-pdf > div {
19801980
width: unset !important;
1981-
}
1981+
} */
19821982

19831983
/* pdf预览适配页面 */
19841984
.react-pdf__Page__canvas,

0 commit comments

Comments
 (0)