Die beste Möglichkeit, SVG-Bild-Tags vorab zu laden?

Question

Ich baue eine SVG-basierte Visualisierung, die (teilweise) darauf beruht, viele Bilder in schneller Folge zu zeigen. Die Bilder können nicht schnell genug aus dem Netzwerk abgerufen werden, daher müssen sie vorab geladen werden.

Mein Verständnis ist, dass SVG image Tags nicht ordnungsgemäß cache, zumindest in den wichtigsten Browsern. So wird das Laden von Libraries und Techniken (zB this SO question) in JavaScript nicht funktionieren. (Ich konnte geschichteten HTML zu verwenden img Tags greifen, sondern auch wegen der Besonderheiten meiner Anwendung, würde Ich mag so viel wie möglich zu reinen SVG-Stick)

Ich sehe zwei Möglichkeiten:

• die Codierung PNG-Bilddaten als base64, Speichern im Speicher als Strings und Verwenden der Strings zum iterativen Auffüllen von image Tags unter Verwendung von data:image/png;base64.
• Layering viele SVG-Gruppen übereinander mit allen außer einem auf oder visibility: hidden gesetzt und die entsprechende Gruppe iterativ enthüllte. Ich glaube jedoch, dass es nicht möglich sein wird, programmatisch zu erkennen, dass alle Bilder das Vorladen beendet haben.

Was ist der beste Weg, um die Bilddaten vorab zu laden? Vielleicht habe ich eine einfachere Option verpasst.

Answer 1

Ich bin nicht vertraut genug mit den zugrunde liegenden Mechanismen des Web-Browser zu wissen, ob diese image Tags mit svg arbeiten, aber ich hatte Erfolg Cachen Bilder mit neuem Bild():

//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 + ')'); 
     } 
    } 

eine Um zu zeigen, image, ich setze einfach den src des angezeigten bildes auf einen bereits geladenen und der browser lädt es aus dem cache.

Es gibt einen weiteren kleinen Trick später in der source - zeigen Sie ein Bild niedriger Qualität zuerst und starten das Laden einer hohen Qualität erst nach einer kurzen Zeitüberschreitung passiert, ohne ein anderes Bild ausgewählt wird. Nachdem das Bild mit hoher Qualität geladen wurde, zeigen Sie es nur dann an, wenn das gleiche Bild noch ausgewählt ist.

Keine Ahnung, ob dies Best Practices oder irgendetwas sind, aber it worked reasonably well.