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

Feat/optimizing image loading for mobile devices
2026-05-14 07:26:52 +00:00 · 2024-05-14 11:39:34 +08:00
parent 265a828391 61a719d10c
commit f037a41c7a
4 changed files with 78 additions and 26 deletions
--- a/components/LazyImage.js
+++ b/components/LazyImage.js
@@ -1,7 +1,6 @@
 import { siteConfig } from '@/lib/config'
 import Head from 'next/head'
-import React, { useEffect, useRef, useState } from 'react'
-
+import { useEffect, useRef, useState } from 'react'
 /**
 * 图片懒加载
 * @param {*} param0
@@ -20,26 +19,35 @@ export default function LazyImage({
  onLoad,
  style
 }) {
+  const maxWidth = siteConfig('IMAGE_COMPRESS_WIDTH')
  const imageRef = useRef(null)
-  const [imageLoaded, setImageLoaded] = useState(false)
+  const [adjustedSrc, setAdjustedSrc] = useState(
+    placeholderSrc || siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
+  )
+
  if (!placeholderSrc) {
    placeholderSrc = siteConfig('IMG_LAZY_LOAD_PLACEHOLDER')
  }

+  /**
+   * 图片加载成功回调
+   */
  const handleImageLoad = () => {
-    setImageLoaded(true)
    if (typeof onLoad === 'function') {
      onLoad() // 触发传递的onLoad回调函数
    }
  }

  useEffect(() => {
+    const adjustedImageSrc = adjustImgSize(src, maxWidth)
+    setAdjustedSrc(adjustedImageSrc)
+
    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
+      entries => {
+        entries.forEach(entry => {
          if (entry.isIntersecting) {
            const lazyImage = entry.target
-            lazyImage.src = src
+            lazyImage.src = adjustedImageSrc
            observer.unobserve(lazyImage)
          }
        })
@@ -56,12 +64,12 @@ export default function LazyImage({
        observer.unobserve(imageRef.current)
      }
    }
-  }, [src])
+  }, [src, maxWidth])

  // 动态添加width、height和className属性，仅在它们为有效值时添加
  const imgProps = {
    ref: imageRef,
-    src: imageLoaded ? src : placeholderSrc,
+    src: priority ? adjustedSrc : placeholderSrc,
    alt: alt,
    onLoad: handleImageLoad
  }
@@ -87,12 +95,39 @@ export default function LazyImage({
  if (style) {
    imgProps.style = style
  }
-  return (<>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img {...imgProps} />
-        {/* 预加载 */}
-        {priority && <Head>
-            <link rel='preload' as='image' src={src} />
-        </Head>}
-    </>)
+  return (
+    <>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img {...imgProps} />
+      {/* 预加载 */}
+      {priority && (
+        <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}`)
 }
--- a/components/NotionPage.js
+++ b/components/NotionPage.js
@@ -211,13 +211,16 @@ const Equation = dynamic(
  { ssr: false }
 )

-// 文档
-const Pdf = dynamic(
-  () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
-  {
-    ssr: false
-  }
-)
+// 原版文档
+// const Pdf = dynamic(
+//   () => import('react-notion-x/build/third-party/pdf').then(m => m.Pdf),
+//   {
+//     ssr: false
+//   }
+// )
+const Pdf = dynamic(() => import('@/components/Pdf').then(m => m.Pdf), {
+  ssr: false
+})

 // 美化代码 from: https://github.com/txs
 const PrismMac = dynamic(() => import('@/components/PrismMac'), {
--- a/components/Pdf.js
+++ b/components/Pdf.js
@@ -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>
+  )
+}
--- a/styles/notion.css
+++ b/styles/notion.css
@@ -1976,9 +1976,9 @@ svg + .notion-page-title-text {
  /* color: var(--notion-gray); */
 }

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

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