最好的方法来预加载SVG图像标签？ [英] Best way to preload SVG image tags?

问题描述

我正在建立一个基于SVG的可视化（部分）依赖于快速连续显示许多图像。

I'm building an SVG-based visualization that (partially) relies on showing many images in quick succession. The images can't be fetched fast enough from the network, so they must be preloaded.

我的理解是SVG没有正确缓存 image 标签，至少在主要浏览器中。因此，JavaScript预加载库管理和技术（例如，此SO问题）将无法使用。 （我可以诉诸使用分层的HTML img 标签，但由于我的应用程序的细节，我想尽可能地坚持纯SVG）

My understanding is that SVG doesn't properly cache image tags, at least in major browsers. So JavaScript preloading librairies and techniques (eg. this SO question) won't work. (I could resort to using layered HTML img tags, but because of the specifics of my application, I would like to stick to pure SVG as much as possible)

我看到两个选项：

• 将PNG图像数据编码为base64，作为字符串并使用 data：image / png; base64 。
使用字符串迭代填充 image

• 将许多SVG组合并在一起，除了一个设置为 display：none 或 visibility：hidden 并迭代取消隐藏适当的组。但是，我相信无法通过编程检测到所有图片都已完成预加载。



• Encoding the PNG image data as base64, storing it in memory as strings and using the strings to iteratively populate image tags using data:image/png;base64.
• Layering many SVG groups on top of each other with all but one set to display: none or visibility: hidden and iteratively unhiding the appropriate group. However, I believe it won't be possible to programatically detect that all images have finished preloading.

图像数据？

推荐答案

我不太熟悉网络浏览器的基本机制，知道是否这将使用svg image 标签，但我成功缓存图像与新的Image（）：

I'm not familiar enough with the underlying mechanics of web browsers to know if this will work with svg image tags, but I had success caching images with 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

To show an image, I just set the src of the displayed image to one that was already loaded and the browser loads it from its cache.

稍后在中使用另一个小技巧， /github.com/1wheel/film-strips/blob/master/showMovie.jsrel =nofollow> source - 首先显示低质量图片，并在短暂的超时后开始加载高质量图片而不选择另一图像。然后，在加载高质量图像后，仅在仍选择相同图像时显示。

There is another small trick used later in the source - show a low quality image first and starting loading a high quality one only after a short timeout passes without another image being selected. Then, after the high quality image has loaded, show it only if the same image is still selected.

不知道这些是最佳做法还是其他任何事情，但它工作得相当不错。

No idea if these are best practices or anything, but it worked reasonably well.

这篇关于最好的方法来预加载SVG图像标签？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！