Najlepszy sposób na wstępne ładowanie znaczników obrazów SVG?

Question

buduję się wizualizacji opartej SVG, że (częściowo) opiera się na pokazaniu wielu zdjęć w krótkich odstępach czasu. Obrazów nie można pobrać wystarczająco szybko z sieci, więc muszą być wstępnie załadowane.

Rozumiem, że SVG nie odpowiednio buforować image tagów, przynajmniej w głównych przeglądarkach. Zatem wstępne wczytywanie skryptów JavaScript i techniki (np. this SO question) nie będzie działać. (Mogłem uciekać się do korzystania warstwowej HTML img tagów, ale ze względu na specyfikę mojej aplikacji, chciałbym trzymać się czystej SVG jak najwięcej)

widzę dwie opcje:

• kodującego dane PNG obraz jako base64, przechowywanie go w pamięci jako ciągi i korzystania z ciągów iteracyjnie zapełnić image tagów za pomocą data:image/png;base64.
• Nakładanie wielu grup SVG na szczycie siebie wszystko, ale z jednego zestawu do display: none lub visibility: hidden i iteracyjnie odkrywania odpowiednią grupę. Jednak uważam, że nie będzie możliwe programowe wykrycie, że wszystkie obrazy zakończyły wstępne ładowanie.

Jaki jest najlepszy sposób wstępnego ładowania danych obrazu? Być może brakowało mi łatwiejszej opcji.

Answer 1

Nie znam na tyle z mechaniki bazowych przeglądarek internetowych, aby wiedzieć, czy to będzie działać z svg image tagów, ale miałem sukces buforowanie obrazów z nowego obrazu():

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

pokazać image, właśnie ustawiłem src wyświetlanego obrazu na taki, który był już załadowany, a przeglądarka ładuje go z pamięci podręcznej.

Jest jeszcze jedna mała sztuczka używana później w source - najpierw pokaż obraz o niskiej jakości i rozpocznij ładowanie wysokiej jakości dopiero po krótkim czasie bez wybierania innego obrazu. Następnie po załadowaniu obrazu o wysokiej jakości wyświetl go tylko wtedy, gdy nadal jest wybrany ten sam obraz.

Nie mam pojęcia, czy to są najlepsze praktyki lub cokolwiek, ale it worked reasonably well.