预加载SVG图像标签的最佳方法？

Question

我正在构建一个基于SVG的可视化,它(部分地)依赖于快速连续显示许多图像.无法从网络中快速获取图像,因此必须预先加载它们.

我的理解是SVG没有正确地缓存image标签,至少在主流浏览器中是这样.因此,JavaScript预加载库和技术(例如,这个SO问题)是行不通的.(我可以使用分层HTML img标签,但由于我的应用程序的细节,我想尽可能坚持纯SVG)

我看到两个选择:

• 将PNG图像数据编码为base64,将其作为字符串存储在内存中,并使用字符串迭代填充image标记data:image/png;base64.
• 将许多SVG组分层放在彼此之上,除了一个设置为display: none或者visibility: hidden迭代地取消隐藏适当的组.但是,我认为不可能以编程方式检测到所有图像都已完成预加载.

预加载图像数据的最佳方法是什么？也许我错过了一个更容易的选择.

Answer 1

我对网络浏览器的底层机制不太熟悉，不知道这是否适用于 svgimage标签，但我成功地使用 new Image() 缓存了图像：

    //download low quality images
    var imageArray = []
    for (var i = 0; i < 600; i++){
        imageArray[i] = new Image();
        imageArray[i].src = moviePath + (i + 1) + '.jpg.t';
        imageArray[i].onload = function(){
            var i = this.src.split(movieName + '/')[1].split(".")[0];
            d3.select("#bar" + i).style("stroke", 'rgb(' + colors[i].rgb + ')');
        }
    }

要显示图像，我只需将显示图像的 src 设置为已加载的图像，然后浏览器从其缓存中加载它。

源代码中稍后使用了另一个小技巧- 首先显示低质量图像，然后仅在短暂超时后且没有选择另一张图像的情况下才开始加载高质量图像。然后，在加载高质量图像后，仅当仍选择相同图像时才显示它。

不知道这些是否是最佳实践或什么，但效果相当不错。