ReactJS中如何预加载切换显示的按钮图片？

你可以通过以下几种方法实现图片预加载，避免切换到激活状态时的图片加载延迟：

方法一：组件挂载时通过Image实例预加载 #

在组件挂载阶段，使用useEffect创建Image对象并设置图片地址，让浏览器提前加载资源并存入缓存：

import React, {useState, useEffect} from 'react';
import styles from './CallButton.module.css'
import whatsAppImg from '../../images/whatsapp.png'
import telegramImg from '../../images/telegram.png'

const CallButton = () => {
    const [isActive, setIsActive] = useState(false);

    useEffect(() => {
        // 预加载目标图片
        const imageUrls = [whatsAppImg, telegramImg];
        imageUrls.forEach(url => {
            const img = new Image();
            img.src = url;
        });
    }, []); // 空依赖数组确保仅在组件挂载时执行一次

    return (<div className={styles.container}>
        {isActive ?
            <div className={styles.appearsLeft}>
                <a className={styles.callButton} title={'Написать в WhatsApp'} href="https://wa.me/+79147726787">
                    <img src={whatsAppImg} className={styles.icon}/>
                </a>
                <a className={styles.callButton} title={'Написать в Telegram'} href="https://t.me/yolkin27">
                    <img src={telegramImg} className={styles.icon}/>
                </a>
            </div> :
            <div className={styles.main}
                 onClick={() => setIsActive(true)}>
                <div className={styles.notActiveButton}>Связаться со мной</div>
            </div>
        }
    </div>);
};

export default CallButton;

方法二：添加隐藏的img标签预加载 #

在组件DOM中添加一个不可见的容器，放入需要预加载的图片标签，浏览器会自动加载这些资源但不会显示：

import React, {useState} from 'react';
import styles from './CallButton.module.css'
import whatsAppImg from '../../images/whatsapp.png'
import telegramImg from '../../images/telegram.png'

const CallButton = () => {
    const [isActive, setIsActive] = useState(false);

    return (<div className={styles.container}>
        {/* 隐藏容器用于预加载图片 */}
        <div style={{position: 'absolute', width: 0, height: 0, overflow: 'hidden'}}>
            <img src={whatsAppImg} alt=""/>
            <img src={telegramImg} alt=""/>
        </div>
        {isActive ?
            <div className={styles.appearsLeft}>
                <a className={styles.callButton} title={'Написать в WhatsApp'} href="https://wa.me/+79147726787">
                    <img src={whatsAppImg} className={styles.icon}/>
                </a>
                <a className={styles.callButton} title={'Написать в Telegram'} href="https://t.me/yolkin27">
                    <img src={telegramImg} className={styles.icon}/>
                </a>
            </div> :
            <div className={styles.main}
                 onClick={() => setIsActive(true)}>
                <div className={styles.notActiveButton}>Связаться со мной</div>
            </div>
        }
    </div>);
};

export default CallButton;

方法三：利用Webpack预加载指令（适用于Webpack项目） #

如果你的项目使用Webpack构建，可以在导入图片时添加注释指令，让Webpack自动处理预加载：

import React, {useState} from 'react';
import styles from './CallButton.module.css'
// 添加webpackPrefetch指令，浏览器空闲时预加载资源
import whatsAppImg from '../../images/whatsapp.png' /* webpackPrefetch: true */
import telegramImg from '../../images/telegram.png' /* webpackPrefetch: true */

const CallButton = () => {
    const [isActive, setIsActive] = useState(false);

    return (<div className={styles.container}>
        {isActive ?
            <div className={styles.appearsLeft}>
                <a className={styles.callButton} title={'Написать в WhatsApp'} href="https://wa.me/+79147726787">
                    <img src={whatsAppImg} className={styles.icon}/>
                </a>
                <a className={styles.callButton} title={'Написать в Telegram'} href="https://t.me/yolkin27">
                    <img src={telegramImg} className={styles.icon}/>
                </a>
            </div> :
            <div className={styles.main}
                 onClick={() => setIsActive(true)}>
                <div className={styles.notActiveButton}>Связаться со мной</div>
            </div>
        }
    </div>);
};

export default CallButton;

注：webpackPrefetch会在浏览器空闲时加载资源，webpackPreload会与当前页面资源并行加载，可根据需求选择。

内容的提问来源于stack exchange，提问作者Igor Meshalkin