预加载SVG图像标记的最佳方法？
预加载SVG图像标记的最佳方法？
提问于 2013-06-08 15:19:15
我正在构建一个基于SVG的可视化，它(部分)依赖于快速连续地显示许多图像。图像无法从网络中快速获取，因此必须预先加载它们。
我的理解是SVG没有正确地缓存image标记，至少在主要浏览器中是这样。因此，JavaScript预压轻油和技术(例如。这个问题是行不通的。(我可以使用分层的HTML标记，但由于应用程序的特殊性，我希望尽可能地使用纯img )。
我认为有两种选择：
- 将PNG图像数据编码为base64，将其作为字符串存储在内存中，并使用字符串来使用
data:image/png;base64迭代填充image标记。 - 将许多SVG组彼此分层，除一个组外，所有组都设置为
display: none或visibility: hidden，并迭代地解除对适当组的隐藏。然而，我相信这是不可能的程序检测所有的图像已经完成预压。
预加载图像数据的最佳方法是什么？也许我错过了一个更简单的选择。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-06-08 15:58:45
我不太熟悉web浏览器的基本机制，不知道这是否适用于svg 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设置为已经加载的图像，浏览器将其从缓存中加载。
在来源后面使用的另一个小技巧-首先显示一个低质量的图像，然后开始加载一个高质量的图像，只有在经过短暂的超时之后，才会选择另一个图像。然后，在加载了高质量的图像后，只有在仍然选择相同的图像时才显示它。
不知道这些是最佳实践还是其他什么，但是它运作得相当好。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17000943
复制相关文章
相似问题
腾讯云开发者
