javascript - NextJS : Images loaded from cache don't trigger the onLoad event

Question

出于搜索引擎优化和社交媒体链接的原因，我目前正在将 ReactJS 客户端渲染应用程序转换为 NextJS 应用程序。

其中一个转换的组件(基本上是一个等待加载完成然后淡入的图像)在 NextJS 环境中使用后无法按预期工作。

它的行为方式如下:

启用缓存:

• 第一次加载图像时，会触发 onLoad 事件，从而显示图像。
• 第二次图像保持隐藏状态，因为从缓存加载图像时不会触发 onLoad 事件。

使用开发工具禁用缓存:

• onLoad 事件始终有效，因为图像永远不会从缓存中提供。

预期的行为和之前仅使用 ReactJS 实现的行为:

• 无论图像是否从缓存加载，onLoad 事件都应触发。

当不使用 React 时，此问题通常是由于有人在定义 onload 函数之前设置图像 src 导致的:

let img = new Image()
img.src = "img.jpg"
img.onload = () => console.log("Image loaded.")

应该是:

let img = new Image()
img.onload = () => console.log("Image loaded.")
img.src = "img.jpg"

下面是在 NextJS 中导致相同问题的简化代码:

import React, { useState } from "react"

const Home = () => {
    const [loaded, setLoaded] = useState(false)

    const homeStyles = {
        width: "100%",
        height: "96vh",
        backgroundColor: "black"
    }

    const imgStyles = {
        width: "100%",
        height: "100%",
        objectFit: "cover",
        opacity: loaded ? 1 : 0
    }

    const handleLoad = () => {
        console.log("Loaded")
        setLoaded(true)
    }

    return (
        <div className="Home" style={homeStyles}>
            <img alt=""
                onLoad={handleLoad}
                src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                style={imgStyles}
            />
        </div>
    )
}

export default Home

Answer 1

由于某人的建议，我最终使用 ImageObject.complete 作为解决方法。

我使用 useRef 引用图像并检查组件安装时的 image.current.complete === true 是否。

这是代码:

import React, { useEffect, useRef, useState } from "react"

const Home = () => {
    const [loaded, setLoaded] = useState(false)

    const image = useRef()

    const homeStyles = {
        width: "100%",
        height: "96vh",
        backgroundColor: "black"
    }

    const imgStyles = {
        width: "100%",
        height: "100%",
        objectFit: "cover",
        opacity: loaded ? 1 : 0
    }

    const handleLoad = () => setLoaded(true)

    useEffect(() => {
        if (image.current.complete) setLoaded(true)
    }, [])

    return (
        <div className="Home" style={homeStyles}>
            <img alt=""
                ref={image}
                onLoad={handleLoad}
                src="https://images.unsplash.com/photo-1558981001-5864b3250a69?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
                style={imgStyles}
            />
        </div>
    )
}

export default Home