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

Merge pull request #2411 from tangly1024/feat/optimizing-image-loading-for-mobile-devices

Browse Source 
Feat/optimizing image loading for mobile devices
This commit is contained in:
tangly1024
2024-05-14 11:39:34 +08:00
committed by GitHub
parent 265a828391 61a719d10c
commit f037a41c7a
4 changed files with 78 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
components/LazyImage.js
View File

@@ -1,7 +1,6 @@
import { siteConfig } from '@/lib/config' import { siteConfig } from '@/lib/config'
import Head from 'next/head' import Head from 'next/head'
import React, { useEffect, useRef, useState } from 'react' import { useEffect, useRef, useState } from 'react'
/** /**
* 图片懒加载 * 图片懒加载
* @param {*} param0 * @param {*} param0
@@ -20,26 +19,35 @@ export default function LazyImage({
onLoad, onLoad,
style style
}) { }) {
const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
const imageRef = useRef(null) const imageRef = useRef(null)
const [imageLoaded, setImageLoaded] = useState(false) const [adjustedSrc, setAdjustedSrc] = useState(
placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
)
if (!placeholderSrc) { if (!placeholderSrc) {
placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER') placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
} }
/**
* 图片加载成功回调
*/
const handleImageLoad = () => { const handleImageLoad = () => {
setImageLoaded(true)
if (typeof onLoad === 'function') { if (typeof onLoad === 'function') {
onLoad() // 触发传递的onLoad回调函数 onLoad() // 触发传递的onLoad回调函数
} }
} }
useEffect(() => { useEffect(() => {
const adjustedImageSrc = adjustImgSize(src, maxWidth)
setAdjustedSrc(adjustedImageSrc)
const observer = new IntersectionObserver( const observer = new IntersectionObserver(
(entries) => { entries => {
entries.forEach((entry) => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
const lazyImage = entry.target const lazyImage = entry.target
lazyImage.src = src lazyImage.src = adjustedImageSrc
observer.unobserve(lazyImage) observer.unobserve(lazyImage)
} }
}) })
@@ -56,12 +64,12 @@ export default function LazyImage({
observer.unobserve(imageRef.current) observer.unobserve(imageRef.current)
} }
} }
}, [src]) }, [src, maxWidth])
// 动态添加width、height和className属性，仅在它们为有效值时添加 // 动态添加width、height和className属性，仅在它们为有效值时添加
const imgProps = { const imgProps = {
ref: imageRef, ref: imageRef,
src: imageLoaded ? src : placeholderSrc, src: priority ? adjustedSrc : placeholderSrc,
alt: alt, alt: alt,
onLoad: handleImageLoad onLoad: handleImageLoad
} }
@@ -87,12 +95,39 @@ export default function LazyImage({
if (style) { if (style) {
imgProps.style = style imgProps.style = style
} }
return (<> return (
{/* eslint-disable-next-line @next/next/no-img-element */} <>
<img {...imgProps} /> {/* eslint-disable-next-line @next/next/no-img-element */}
{/* 预加载 */} <img {...imgProps} />
{priority && <Head> {/* 预加载 */}
<link rel='preload' as='image' src={src} /> {priority && (
</Head>} <Head>
</>) <link rel='preload' as='image' href={adjustedSrc} />
</Head>
)}
</>
)
}
/**
* 根据窗口尺寸决定压缩图片宽度
* @param {*} src
* @param {*} maxWidth
* @returns
*/
const adjustImgSize = (src, maxWidth) => {
if (!src) {
return siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
}
const screenWidth = window.screen.width
// 屏幕尺寸大于默认图片尺寸，没必要再压缩
if (screenWidth > maxWidth) {
return src
}
// 正则表达式，用于匹配 URL 中的 width 参数
const widthRegex = /width=\d+/
// 使用正则表达式替换 width 参数
return src.replace(widthRegex, `width=${screenWidth}`)
} }

17
components/NotionPage.js
View File

@@ -211,13 +211,16 @@ const Equation = dynamic(
{ ssr: false } { ssr: false }
) )
// 文档 // 原版文档
const Pdf = dynamic( // const Pdf = dynamic(
() => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf), // () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
{ // {
ssr: false // ssr: false
} // }
) // )
const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
ssr: false
})
// 美化代码 from: https://github.com/txs // 美化代码 from: https://github.com/txs
const PrismMac = dynamic(() => import('@/components/PrismMac'), { const PrismMac = dynamic(() => import('@/components/PrismMac'), {

14
components/Pdf.js Normal file
View File

@@ -0,0 +1,14 @@
/**
* 渲染pdf
* 直接用googledocs预览pdf
* @param {*} file
* @returns
*/
export function Pdf({ file }) {
const src =
'https://docs.google.com/viewer?embedded=true&url=' +
encodeURIComponent(file)
return (
<embed src={src} type='application/pdf' width='100%' height='100%'></embed>
)
}

4
styles/notion.css
View File

@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
/* color: var(--notion-gray); */ /* color: var(--notion-gray); */
} }
.notion-asset-wrapper-pdf > div { /* .notion-asset-wrapper-pdf > div {
width: unset !important; width: unset !important;
} } */
/* pdf预览适配页面 */ /* pdf预览适配页面 */
.react-pdf__Page__canvas, .react-pdf__Page__canvas,