优化移动端图片加载尺寸；处理懒加载异常

2026-05-14 07:26:52 +00:00 · 2024-05-14 11:38:02 +08:00
parent 265a828391
commit 47e834629d
1 changed files with 52 additions and 17 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}`)
 }