問題は次のとおりです。Google マップにたくさんのマーカーが表示されています。
問題は、マップがロードされ、しばらく空のままになり、その後マーカーが表示されることです。マーカーはカスタマイズされた PNG です。
私の考えは、それらを「プリロード」して（正しい言葉かどうかはわかりませんが）、マップとほぼ同時に表示されるようにすることです。
これまでに行ったことは、マップで使用しているのと同じ画像を、マップの外側のページの前半に追加することです。display:none;
よくわかりませんが、マップから画像が表示されるまでの時間が短縮されたようです。
それを行うのが最善の方法ですか、それは良い習慣ですか?
display:noneプリロードには使用しないでください。に設定された要素はその物理属性をレンダリングしdisplay:noneないため、ブラウザは要素が表示されるまでわざわざダウンロードしません。
別の方法として を使用することvisibility:hiddenもできますが、ほとんど同じことを行うユーザー エージェントに遭遇するリスクがあります。visibility:hiddenブラウザが画像のボックスモデルを計算する必要があり、これには画像がロードされている必要があります（寸法を取得するため）。ただし、これが IE6 で機能するとは思えません。
</body>最後のテクニック (そして私のお気に入り) は、タグの直前に div を作成することです。で絶対配置しleft: -99999999px; top: -99999999pxます。ブラウザーは強制的に画像をレンダリングし (その結果、画像をロードします)、面倒な Javascript を処理する必要はありません。
これを問題に統合するには、「preload div」の後に Google マップのコードを配置します。ブラウザは、コードを実行してマップを作成する前に、画像をロードする必要があります。これで問題が解決するはずです。
お役に立てれば！
「スプライト」、つまり 1 つの png 上の個別の画像のコレクションを使用できます。これには、必要なロードが 1 つだけで済む、つまり個別のロードが少なくて済むという利点があります。Google GWT はこの手法を積極的に推進しています (つまり、イメージ バンドル)。
この手法の価値は、読み込みが必要な個別の画像の数に応じて増加します。個別の画像が多いほど、読み込みに時間がかかります。
最近のほとんどのブラウザを思い出すと、画像は常に1回だけ読み込まれます（画像のsrcが同じ場合）。マップが読み込まれる前にそれらを読み込むことを意味していると思います。
私の意見では、はそれほど重要ではありません。マーカーは地図画像自体に比べて比較的軽いはずで、とにかく地図なしでは実際には使用できません。
それがユーザーエクスペリエンスを向上させると思うなら、それは良い習慣だと思いますが、私はそれらをよりクリーンな方法で取得しようとします、おそらくページロードの早い段階でajax呼び出しですか？
Ajax In Action：画像のプリロードをご覧ください