D3缩放大图像性能有很大的滞后性

Question

我正在使用d3.geo和d3缩放来创建一个2d地图。它的工作原理相当不错，但是当我添加一个大分辨率图像(5120x2880)来映射SVG时，我的性能会出现奇怪的滞后。我不明白为什么会这样。

Code: https://plnkr.co/edit/frhUsAwC6cBU3V5q

我正在做的步骤：

1. 使用geojson和d3.geo创建一个世界地图的SVG。
2. 向SVG添加了10幅图像，默认情况下，所有图像都会显示:除了第一张，没有。图像的边框在美国。
3. 然后启用了整个SVG的缩放功能，这样图像就可以用地图缩放。
4. 在顶部有一个0-9范围的滑块。根据值滑块是打开的，我显示相应的图像并隐藏所有其他的。

现在，滑动滑块来回滑动，它切换呈现的图像。它相当光滑。但是随着我的不断放大，滑块很快就有了很大的滞后。虽然我对滑块所做的唯一的事情就是显示和隐藏图像。

我为此创建的柱塞：https://plnkr.co/edit/frhUsAwC6cBU3V5q

好像是内存泄露什么的。

看上去：

​

Answer 1

如果你先把滑块滚动到所有的图像，当你回到它们的时候，延迟就不会发生了。

问题是你没有preload图像。只有当用户在滑块上选择时才会加载它们，因此浏览器必须下载并动态呈现图像，这可能需要一段时间，这取决于您的互联网连接。