7

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

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

我看到两个选项：

  • 将 PNG 图像数据编码为 base64，将其作为字符串存储在内存中，并使用字符串迭代地填充image标签data:image/png;base64。
  • 将许多 SVG 组层叠在一起，除了一组之外的所有组都设置为display: noneorvisibility: hidden并迭代地取消隐藏适当的组。但是，我相信不可能以编程方式检测到所有图像都已完成预加载。

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

4

1 回答 1

2

我对网络浏览器的底层机制不够熟悉，不知道这是否适用于 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 设置为已加载的图像，然后浏览器从其缓存中加载它。

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

不知道这些是否是最佳实践或任何东西，但它工作得相当好。

于 2013-06-08T15:58:45.163 回答