SVGイメージタグをプリロードする最良の方法は？

Question

私はSVGベースのビジュアライゼーションを構築しています。これは（部分的に）多くのイメージを素早く表示することに依存しています。イメージはネットワークから十分に高速に取り出すことができないため、プリロードする必要があります。

私の理解では、SVGが少なくとも主要なブラウザではimageタグを適切にキャッシュしていないことを理解しています。したがって、JavaScriptプリロードのlibrairiesと技術（例えば、this SO question）は動作しません。エンコーディング

• ：私は2つのオプションを参照してください（私は層状のHTMLにimgタグを使用してに頼ることができますが、理由は自分のアプリケーションの仕様を、私は可能な限り純粋なSVGに固執したいと思います）

  をPNG画像データをbase64としてメモリに格納し、文字列を使用してimageタグを反復的に取り込みます。data:image/png;base64を使用します。

• 複数のSVGグループを重ねて、display: noneまたはvisibility: hiddenに設定された1つを除きすべてのSVGグループを重ねて、適切なグループを繰り返し表示します。しかし、私はすべての画像がプリロードを完了したことをプログラムで検出することはできないと考えています。

画像データをプリロードするにはどうすればよいですか？おそらく私はもっと簡単なオプションを見逃してしまったでしょう。

Answer 1

私は、これはSVGで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を既にロードされているものに設定し、ブラウザがキャッシュからロードするようにしました。

sourceの後にもう1つの小さなトリックがあります。最初に低品質の画像を表示し、別の画像が選択されていない状態で短いタイムアウトが経過した後にのみ高品質の画像を読み込みます。その後、高品質のイメージがロードされた後、同じイメージがまだ選択されている場合にのみ、それを表示します。

ベストプラクティスなのかどうかは分かりませんが、it worked reasonably wellです。