SVGファイルの画面読み込み

Question

function(){
	$("#svgArea").load("images/logo.svg svg", function(){

		//SVGの処理
		
	});
}

http://sterfield.co.jp/designer/jquery%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E5%A4%96%E9%83%A8svg%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E8%AA%AD%E3%81%BF%E8%BE%BC%E3%81%BF/

上記やり方でSVGの取得・表示を行っております。
ですが、下記問題点を抱えております。

1, 読み込みが少々遅い
2, 別のところでSVGファイルの更新を行っており、都度スクリプトでSVGの再ロードを行っているが、何回か読み込まないと最新の画像に更新されないことがある。

上記課題を解決できる別の方法はございませんでしょうか？
また、SVGの読み込みが完了したか判定できる方法があればベターです。

Answer 1

初めまして。
画面ロード時に先読みしてみてはいかがでしょうか？
一般的にイメージファイルで行うものではあるようですが、
$('<img src="パス">');
で、メモリに画像がキャッシュされるそうです。

イメージファイル以外でも使えるのかどうか不明ですが、サーバアクセスをするという点では同じだと思いますので、試す価値はあるかと思います。

Comments

[suran]

すみません、説明足らずでした。
SVGは画面ロード時だけでなく、定期的なペースでスクリプトで再読み込みを行います。
SVGは裏で都度更新されているため、画面ロード時だけ読み込んでも最新のデータが表示されないことになってしまいます。
またご提示していただいた方法でのSVGの読み込み方が分からないです・・。

[T.Yokotani]

上記了解です。

■定期的に書き出ししている際に書き換わらない
この部分はちょっと引っかかっているのですが、まさにキャッシュのせいではないかと想定されます。
常に新しいファイルを読むためにはimages/logo.svg+「?ランダム文字列」とするとファイルURLが変わるのでキャッシュではなく実ファイルから読み込まれるはずです。
的に敵に読み込む前にランダム文字列を作り直せばキャッシュではなく実ファイルを読みに行くはずです。

■読ませ方
$('<img src="images/logo.svg svg?XXXXXX">');
と書くだけでメモリにはキャッシュされるのではないかと思います。
定期的に書き出しをする直前にメモリキャッシュして、その数秒後に実際の書き出しをすればキャッシュした画像が表示されるかと思います。こうすることで、表示時に通信するのではなく、キャッシュから書き出すのでスピードは上がるのではないかと思います。

■注意事項
未テストですので、あくまでも理論上。。。というレベルです。
また、メモリ上に常にキャッシュをさせるので、開き続けるとメモリを消費します。

想定の話だけで申し訳ありません。

[suran]

ご返事が遅くなってしまい申し訳ありません。
下記方法で試してみましたが、読み込み速度に改善は見られないようです。
（相変わらず古い画像が数秒間読み込まれます）

var timestamp = new Date().getTime();// タイムスタンプ取得
$("#svgArea").load("images/logo.svg?" + timestamp + " svg", function(){
});

また0.5秒ごとに再読み込みを行っているため、メモリキャッシュによる方法は効果が薄いかもしれません。

[T.Yokotani]

0.5秒ですか・・・・
確かにそれだと厳しいかもしれませんね。。。。