.pngを遅延読み込みにすることはできますか？

Question

Bootstrapのポップアウトメニューをクリックすると、その中の.pngがいっぱいになっているので、開くには数秒かかります。私はすでにここで.svgsを使ってみましたが、一貫してレンダリングするのは悪夢でした。

これらの.pngファイルをページ読み込みにロードする最良の方法は、ポップアウトメニューが瞬時に開くようにすることです。私は現在、ページの一番下にこれを持っています。ポップアウトメニューのクリックを速くすることはありません。

<div style="display: hidden"> 
    <img src="img1"> 
    <img src="img2"> 
    ... etc ... 
</div> 

Answer 1

pngファイルを使用する前に読み込むことができます。 pngごとにimg要素を作成し、srcプロパティを設定することで、ページの読み込みが完了したらjavascriptまたはjQueryを使用してこれを行うことができます。

イメージがダウンロードされると、ポップアップが開くとすぐに利用可能になります。

this question.