7

私は、(部分的に) 多くの画像をすばやく連続して表示することに依存する SVG ベースの視覚化を構築しています。画像はネットワークから十分な速さでフェッチできないため、事前にロードする必要があります。

image私の理解では、少なくとも主要なブラウザーでは、SVG はタグを適切にキャッシュしていません。そのため、JavaScript プリロード ライブラリとテクニック (例: this SO question ) は機能しません。(階層化された HTMLimgタグを使用することもできますが、アプリケーションの仕様により、できるだけ純粋な SVG に固執したいと思います)

2 つのオプションが表示されます。

  • PNG 画像データを base64 としてエンコードし、それを文字列としてメモリに格納し、文字列を使用imageしてdata:image/png;base64.
  • 多くの SVG グループを互いの上に重ねて、1 つを除くすべてをに設定するdisplay: noneかvisibility: hidden、適切なグループを繰り返し非表示にします。ただし、すべての画像のプリロードが完了したことをプログラムで検出することはできないと思います。

画像データをプリロードする最良の方法は何ですか? おそらく、私はより簡単なオプションを逃しました。

4

1 に答える 1

2

これがsvgタグで機能するかどうかを知るには、Webブラウザーの基本的な仕組みに精通していませんがimage、new 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 を既に読み込まれているものに設定するだけで、ブラウザーはその画像をキャッシュから読み込みます。

ソースで後で使用される別の小さなトリックがあります-最初に低品質の画像を表示し、別の画像が選択されずに短いタイムアウトが経過した後にのみ、高品質の画像の読み込みを開始します。次に、高品質の画像が読み込まれた後、同じ画像がまだ選択されている場合にのみ表示します。

これらがベストプラクティスなのか何かなのかはわかりませんが、かなりうまくいきました.

于 2013-06-08T15:58:45.163 に答える