当图片太大或太多导致动画卡顿时，如何用预加载方法解决卡顿问题

    在项目中遇到这样一个需求，用arco-design画的一个导航切换的动画，如下图：

当图片太多或者太大时，点击左右切换会显得异常卡顿，所以想到了使用预加载的方式去解决卡顿的问题。

预加载的思路主要是预先告知浏览器某些资源可能在将来会被使用到，从而提前将这些资源加载到本地缓存中。这样，在后续需要用到这些资源时，就可以直接从缓存中快速获取，减少等待时间，提升用户体验。

预加载的方法可以封装出来：

export const preloadImages = () => {
    // 需要预加载的图片
    const preloadImageUrls: string[] = [
        'a.png',
        'b.png',
        'c.svg',
        '...'
    ]

    // 预加载图片的函数
    function handlePreloadImages(urls: any[]) {
        urls.forEach((url) => {
            const img = new Image()
            img.src = require(`../assets/imgs/${url}`)
        })
    }

    // 使用requestIdleCallback进行预加载
    function preloadWithIdleCallback(urls: any, callback: any) {
        const preload = () => {
            requestIdleCallback(
                (deadline) => {
                    while (deadline.timeRemaining() > 0 && urls.length > 0) {
                        handlePreloadImages([urls.shift()])
                    }
                    if (urls.length > 0) {
                        // 如果还要图片未加载，则递归调用
                        preload()
                    } else {
                        // 所有图片加载完毕，执行回调
                        callback()
                    }
                },
                { timeout: 2000 }
            ); // 这里的timeout是可选的，表示最多等待2000毫秒
        }
        preload()
    }

    // 开始预加载图片
    preloadWithIdleCallback(preloadImageUrls, () => {
        console.log('所有图片已预加载完毕')
    })
}

在需要用到的页面文件直接引用即可。