Il modo migliore per precaricare i tag immagine SVG?

Question

Sto costruendo una visualizzazione SVG-based (parzialmente) si basa sul mostrare molte immagini in rapida successione. Le immagini non possono essere recuperate abbastanza velocemente dalla rete, quindi devono essere precaricate.

mia comprensione è che SVG non memorizza nella cache correttamente image tag, almeno nei principali browser. Pertanto, il caricamento e il caricamento precaricato di JavaScript di librairies e tecniche (ad esempio this SO question) non funzionerà. (Potrei ricorrere all'utilizzo di strati HTML img tag, ma a causa delle specificità della mia domanda, vorrei attenersi a pura SVG per quanto possibile)

Vedo due opzioni:

• che codificano per le i dati delle immagini PNG come Base64, memorizzazione nella memoria come stringhe e che utilizzano le stringhe per compilare in modo iterativo image tag utilizzando data:image/png;base64.
• stratificazione molti gruppi SVG uno sopra l'altro con tutti, ma un insieme di display: none o visibility: hidden e unhiding iterativamente il gruppo appropriato. Tuttavia, credo che non sia possibile rilevare in modo programmatico che tutte le immagini abbiano terminato il pre-caricamento.

Qual è il modo migliore per precaricare i dati dell'immagine? Forse ho perso un'opzione più semplice.

Answer 1

Non ho una conoscenza abbastanza con i meccanismi alla base di browser web per sapere se questo funzionerà con svg image tag, ma ho avuto successo la memorizzazione nella cache le immagini con nuova immagine():

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

Per mostrare un immagine, ho appena impostato l'src dell'immagine visualizzata su uno già caricato e il browser lo carica dalla sua cache.

C'è un altro piccolo trucco utilizzato in seguito nello source - mostrare prima un'immagine di bassa qualità e iniziare a caricarne uno di alta qualità solo dopo un breve timeout senza che venga selezionata un'altra immagine. Quindi, dopo aver caricato l'immagine di alta qualità, mostrarla solo se è ancora selezionata la stessa immagine.

Non ho idea se queste sono le migliori pratiche o altro, ma it worked reasonably well.