SVG görüntü etiketlerinin ön yüklemesinin en iyi yolu?

Question

SVG tabanlı bir görselleştirme yapıyorum (kısmen) hızlı bir şekilde art arda birçok görüntüyü göstermeye dayanıyor. Görüntüler ağdan yeterince hızlı alınamaz, bu yüzden önceden yüklenmiş olmaları gerekir.

Anlayışım, SVG'nin en azından büyük tarayıcılarda image etiketini düzgün şekilde önbelleğe almamasıdır. Bu yüzden JavaScript ön yükleme kütüphaneleri ve teknikleri (örn. this SO question) çalışmayacaktır. (Ben katmanlı HTML img etiketlerini kullanarak çare olabilir, ama çünkü benim uygulamanın özelliklerini, ben mümkün olduğunca saf SVG sopa istiyorum) İki seçenek görmek

: Kodlama

• PNG resim verisi base64 olarak, bellekte dizge olarak saklamak ve data:image/png;base64 kullanarak image etiketlerini yinelemek üzere dizeleri kullanarak dizgilerini kullanarak.
• Birçok SVG grubunu üst üste yerleştirmek, ancak tümü bir set olmak üzere display: none veya visibility: hidden ve uygun grubun iteratif olarak gösterilmesini engeller. Ancak, tüm görüntülerin ön yüklemeyi bitirdiğini programlı olarak algılamanın mümkün olmayacağına inanıyorum.

Görüntü verisini önceden yüklemenin en iyi yolu nedir? Belki daha kolay bir seçeneği kaçırdım.

Answer 1

Bu svg ile image etiketlerini çalışacak olmadığını bilmek web tarayıcıları altında yatan mekaniği ile yeterince aşina değilim ama başarıyı yeni Image ile görüntüleri önbelleğe() vardı:

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

bir göstermek için görüntü, sadece görüntülenen resmin src'sini zaten yüklenmiş olan bir tarayıcıya ayarlıyorum ve tarayıcı önbelleğinden yükler.

source'da daha sonra kullanılan başka küçük bir numara daha vardır - önce düşük kaliteli bir görüntü gösterin ve yalnızca başka bir resim seçilmeden kısa bir zaman aşımı geçtikten sonra yüksek kaliteli bir yükleme yapmaya başlar. Ardından, yüksek kaliteli görüntü yüklendikten sonra, yalnızca aynı görüntünün seçili olduğunu gösterin.

Bunlar en iyi uygulamalar veya herhangi bir şey olup olmadığı konusunda bir fikir yok, ancak it worked reasonably well.