リーフレットにイメージオーバーレイをプリロードする

Question

私のプロジェクトでは、リーフレットマップにスライダを使用して50枚ほどのオーバーレイイメージを表示します。空白を避けるために、私はループ内で画像をプリロードしています：

imageArray.push(new imageItem(url+val)); 

をその後、私はオーバーレイ層を表示する必要があるとき、私はリーフレットする画像のURLを送信する必要があります。

ovl=new L.imageOverlay(get_ImageItemLocation(imageArray[k]), bounds), 
ovl.addTo(mymap); 

どこget_ImageItemLocation()は次のとおりです。私は、この手順はパフォーマンスの面で正しいかどうか疑問に思って

function get_ImageItemLocation(imageObj) { 
    return(imageObj.image_item.src) 
} 

。 ImageオブジェクトをURLの代わりにL.imageOverlayに送信する方法はありませんか？私はこれで2倍の画像にアクセスしていますか？

Answer 1

イメージがブラウザにキャッシュされている場合（ほとんどの場合、サーバーによって送信されたヘッダーに依存します）、イメージは2回ダウンロードされません。 More on HTTP caching on MDN。デベロッパーツールの[ネットワーク]タブには、このチェックのために超便利です：リーフレットのドキュメントを見てみるとimageOverlay source

を、それはない実際の画像データ、URLのみをとる明らかです。

本質的にちょうど

this._image.src = URL.createObjectURL(blob); // where blob is your image data 

のようなもので自分のsetUrl method

this._image.src = url; 

でコードを置き換え、それを変更するにはあまりにも難しいことではないだろうが...私はそれについてあまり心配しないだろう。あなたの画像が（正確なmax-ageが応答ヘッダにセットされた状態で）ブラウザにキャッシュされていることを確認しても問題ありません。

Answer 2

URLではなくL.imageOverlayにImageオブジェクトを送信する方法はありませんか？

イメージオーバーレイAPIは、リーフレット1.2.0のよう文字列よりも何かを受け付けません。

私はこれで2倍の画像にアクセスしていますか？

あなたはこれで二回<img>要素を作成しています。私はこれがパフォーマンスに大きな影響を与えるとは思っていません。特に50枚の画像だけで、実際には画像の1つがDOMに挿入されています。

リーフレットイメージのオーバーレイでも、URL文字列の代わりに<img>ノードを受け入れる必要があると主張できます。しかし、リーフレットはその内部でクラスとリスナーを<img>要素に適用するので、渡すノードは変更されることに気づくべきです。

あなたのケースでは問題はないかもしれませんが、それ以外の場合もあります。

最後に、そうすることでパフォーマンスが大幅に向上するとは思えません。

<img>の参照を事前に取り除くこともできます（URLを再構築するか、URL文字列をメモリに保存しておくだけです）。ブラウザでイメージを取得し、それはキャッシュの準備ができています。

Answer 3

もう1つのアプローチは、オーバーレイが同じバウンディングボックスを共有する場合にのみ有効です。ビデオファイルに50個の画像をまとめ、L.VideoOverlayを使用します。次に、スライダは、画像を切り替えるのではなく、ビデオの再生時間を正しいフレームを指すように設定する必要があります。