Javascript 如何在打开后而不是之前加载批注图像

我在地图上有成千上万的注释。每个注释都是一个唯一的图像。因此，除非用户要求，否则我不想加载地图上的所有图像

我的批注具有以下属性：

detailCalloutView: <Image source={{uri: data[i].img_url, cache: 'force-cache'}} style={styles.thumbnail} resizeMode={Image.resizeMode.contain}/>

detailcallout视图：

如何使图像仅在注释打开时加载？我不想通过打开所有注释来分解千兆字节的数据

我想我需要对聚焦做些什么，但我不太确定如何做。

改变这个

detailcallout视图：

对此

detailcallout视图：

然后将事件侦听器添加到映射中的所有图像

var attr = this.getAttribute("data-annotation");
this.src = attr;

---

这是要补充的主要内容。现在即使关闭它也不必再次加载，因为

src

将永远是实际图像。我不会为您包装整个JavaScript，但您应该从中了解要点

创建一个小的1x1图像，并使其成为每个注释的src。然后使用实际注释的src向每个属性添加一个数据属性。鼠标悬停或单击后，使JavaScript将src更改为数据src。您无法在React Native中为图像添加侦听器，并且当我向注释添加

onFocus:（）=>{…}

时，无法实际引用特定图像。此外，

.src

在React Native中无效。我不使用React，我只是用Native js添加了我的想法。因为您使用的是JavaScript标记，所以所有其他React原生问题都使用JavaScript标记，所以我也照做了。哦，我相信他们是这样做的。我不使用库，所以我不能建议你做出任何反应，尽管你明白我的意思。使用小的IMG，然后选择事件监听器。我相信你能找到一些方法。