Snap.svgに外部イメージを複数回読み込む：リクエストをキャッシュする方法？

Question

私は外部から読み込んでいる画像を持っています。私は自分のsvg要素に何度も追加したいと思います。

現在、mySnap.load(path)...を呼び出すと、画像のAJAXリクエストが行われます。 （jsFiddleの例hereを参照して、ネットワークのタブを見てください）。これはブラウザによってキャッシュされている場合とキャッシュされていない場合がありますが、リクエストしないようにしたいと思います。

私は自分のキャッシュを展開しようとしたが、それはうまくいきませんでした：

let cache = {} 
let load = function(path, callback) { 
    if (cache[path]) { 
    callback(cache[path]) 
    } else { 
    Snap.load(path, (img) => { 
     cache[path] = img 
     callback(img) 
    }) 
    } 
} 

here

問題は、私が返された値を使用しようとした二回目は、それがされていたということでした例を参照してください。話をするために "空になった"。私はまだ文書断片を持っていましたが、内容はありませんでした。私はこれが埋め込まれているときにスナップライブラリによって操作されたオブジェクトを指しているからだと仮定しています。

戻されたオブジェクトをキャッシュするにはどうすればよいでしょうか？ Fragmentには、のように、.clone()の機能がありません。

Answer 1

単純に複製して、すでに追加されていれば追加することもできますし、use要素として参照することもできます。

Snap.load(path, (img) => { 
    var el = img.select("g") 
    snap.append(el); 
    moveIt(el) 
    for(var c=0; c<10; c++) snap.append(moveIt(el.clone())) 
}) 

function moveIt(el) { 
    var x = -300 + Math.random() * 120; 
    var y = -400 + Math.random() * 120; 
    el.transform("t"+x+","+y+" s0.1,0.1"); 
    return el; 
} 

jsfiddle

Answer 2

それは私が、私はそれを使用するときに返された要素のクローンを作成し、明示的にクローンをもう一度使用できることは事実だが、私は、私はwouldn「プラグアンドプレイ」ソリューションを求めていましたスナップにキャッシュを追加し、既にロードされているかどうかを心配することなく、いつでも新しいイメージを読み込むことができるように考える必要があります。

これは私が私が私が定期的に負荷の場合とまったく同じ方法で、再びそれを使用することができますように返されたドキュメントフラグメントのクローンを作成する方法を働いた後、私は、使用して終了ソリューションです：

// drop-in replacement for Snap.load, with caching 
cache = {} 
load = function(path, callback) { 
    if (cache[path]) { 
    callback(Snap(cache[path].node.cloneNode(true))) 
    } else { 
    Snap.load(path, (img) => { 
     cache[path] = Snap(img.node.cloneNode(true)) 
     callback(img) 
    }) 
    } 
} 

それはここで働いてください：http://jsfiddle.net/5p5wmdc3/

だけでどこでも私はSnap.loadを呼び出すために使用私のパスにMyLib.loadを呼び出して、私は実際のプラグインとしてこれを追加する方法があることを賭けるが、一瞬、私は幸せです。