图像预加载错误仅在生产环境中发生（Javascript，ReactJS）

Question

我正在制作一个简单的投资组合网站，该网站在后台循环播放全屏图像。

我创建了两组图像，一组用于桌面，一组用于移动（这是桌面的裁剪版本）。

对于每个集合，我将它们存储在其自己的数组中。像这样：

图像存储在image文件夹本地。

BackgroundImages.js

import AltairMockup from "../../images/gallery/desktop/altair-mockup.jpg"
import EspertechMobile from "../../images/gallery/desktop/espertech-mobile.jpg"
import EspertechNamecard from "../../images/gallery/desktop/espertech-namecard.jpg"

import MAltairMockup from "../../images/gallery/mobile/m-altair-mockup.jpg"
import MEspertechMobile from "../../images/gallery/mobile/m-espertech-mobile.jpg"
import MEspertechNamecard from "../../images/gallery/mobile/m-espertech-namecard.jpg"

export const DesktopBackgroundImages = [
  { id: 0, url: AltairMockup },
  { id: 1, url: EspertechMobile },
  { id: 2, url: EspertechNamecard }
  // ... 7 more, 10 in total
]

export const MobileBackgroundImages = [
  { id: 10, url: MAltairMockup },
  { id: 11, url: MEspertechMobile },
  { id: 12, url: MEspertechNamecard }
  // ... 7 more, 10 in total
]

我已将父组件中的图像预加载为：

Gallery.component.jsx

  // Preload images
  useEffect(() => {
    if (process.env.NODE_ENV === "development")
      console.log("Swapped image arrays")

    if (isDesktop) {
      DesktopBackgroundImages.forEach(({ url }) => {
        const img = new Image()
        img.src = url
      })
    } else {
      MobileBackgroundImages.forEach(({ url }) => {
        const img = new Image()
        img.src = url
      })
    }
  }, [isDesktop])

然后我用react-spring创建了一个图像轮播/图像库循环程序，并且在本地开发中一切正常。

如您所见，在Chrome检查器的Network标签下，已为桌面获取了正确的图像阵列。

但是，一旦我将代码推送到Netlify时，该页面实际上由于某种原因而获取了移动阵列的第一张图像，从而使其掩盖了桌面阵列的第一张图像。

我不知道是什么原因导致了这个仅在生产中发生的额外提取错误。

特别是m-altair-mockup...甚至在桌面图像之前被预加载的原因，因为initiated似乎是(index)，而桌面图像却被initiated正确地是Gallery.component.jsx。

展示错误的实时网站：https://altair-studio.netlify.com/

请解释，谢谢！

Answer 1

[请在下面查看。

function useMediaQuery() {
  const [isMobile, setIsMobile] = useState(false)

  const handleSizeChange = ({ matches }) => setIsMobile(matches)

  useEffect(() => {
    // Window does not exist on SSR
    if (typeof window !== "undefined") {
      const mql = window.matchMedia("(max-width: 650px)")
      mql.addListener(handleSizeChange)
      setIsMobile(mql.matches) // Set initial state in DOM

      return () => mql.removeListener(handleSizeChange)
    }
  }, [])

  return { isMobile }
}

useMediaQuery的初始状态为false。