Question

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

我的理解是SVG没有正确缓存image标记，至少在主流浏览器中是这样。所以JavaScript预加载库和技术（例如this SO question）将不起作用。（我可以使用分层的HTML img标签，但由于我的应用程序的细节，我想尽可能坚持纯SVG）

我看到两个选项：

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

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

Answer 1

我对网络浏览器的基础机制不太熟悉，知道这是否适用于svg image标签，但我成功地使用新的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设置为已加载的图像，浏览器就会从其缓存中加载它。

稍后在source中使用另一个小技巧 - 首先显示低质量图像，并且仅在短暂超时通过后才开始加载高质量图像而不选择另一个图像。然后，在加载高质量图像后，仅在仍然选择相同图像时显示它。

不知道这些是最佳做法还是其他任何内容，但it worked reasonably well。

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

1 个答案: