Javascript 一种更好、高效的预加载GIF/图像的方法

我有一个基础gif，当点击时，它会切换到另一个从5个列表中随机选择的gif。只需使用一个

并更改其源代码，即可使其在加载时从视图中消失

为了避免这种情况，我正在尝试预加载我需要的所有GIF，同时将其他GIF的维度设置为0x0，如下所示

const gifs = [
  { src: require('../../assets/animate1.gif') },
  { src: require('../../assets/animate2.gif') },
  { src: require('../../assets/animate3.gif') },
]
const showIndex = 1

// within the render function
<TouchableWithoutFeedback onPress={this.changeGif}>
  <View>
    { gifs.map(gif, index) => {
      let style = showIndex === index ? styles.show : styles.hide
      return (
        <Image
          source={gif.src}
          style={style} />
      )
    }
  </View>
</TouchableWithoutFeedback>

const gifs=[
{src:require（'../../assets/animate1.gif'）}，
{src:require（'../../assets/animate2.gif'）}，
{src:require（'../../assets/animate3.gif'）}，
]
常数showIndex=1
//在渲染函数中
{gifs.map（gif，索引）=>{
让style=showIndex==index？styles.show:styles.hide
返回(
)
}

---

如果只有两个图像，这很好。但是如果我开始添加3个或更多图像，性能会下降。是否有更好的方法预加载图像，在我的例子中是gifs？

性能不是直接基于客户端下载信息的能力吗？此外，您还没有显示

changegf

功能。如果将图像大小调整为0x0你不是在浪费时间对图像进行双三次缩放吗？你能提供更多细节吗？你可以在“真实”元素后面保留另一个带有微调器gif（这将是你预加载的唯一图像）的元素。因此你将微调器视为“过渡”@Makaze我的图像没有下载，而是存储在本地的源代码文件夹中。我的changeGif函数只是更改图像组件源代码所依赖的状态。@Roberto是的，我也这么认为！但我说还没有官方支持图像预加载，并建议所述解决方案。@r0hitsharma:我需要一个“天衣无缝"在第一个图像和第二个图像之间进行转换，因此只有预加载是我能想到的唯一解决方案。性能是否直接取决于客户端下载信息的能力？此外，您还没有显示

changegf

功能。如果将图像大小调整为0x0，您不是在浪费时间进行双三次sc吗图像的缩放？你能提供更多细节吗？你可以在“真实”元素后面保留另一个带有微调器gif（这将是你预加载的唯一图像）的元素。因此你将微调器视为一个“过渡”@Makaze我的图像没有下载，而是存储在本地的源代码文件夹中。我的changeGif函数只是更改图像组件源代码所依赖的状态。@Roberto是的，我也这么认为！但我说还没有官方支持图像预加载，并建议所述解决方案。@r0hitsharma:我需要一个在第一个图像和第二个图像之间进行“无缝”转换，因此我能想到的唯一解决方案是预加载。