彼らはページ上の他の速いどこでもロードされていて、それは良い習慣ですので、？画像をプリロードする方法

Question

ここでのことだ：私はそれでマーカーの多くのGoogleマップを持っている。

。

問題は、マップのロードは、しばらくの間、空のままだけにしてマーカーが表示されていることです。マーカーは、PNG画像をカスタマイズされます。

私の考えがあると、「プリロード」彼ら（わからない、それは正しい言葉だ）ので、彼らはマップとほぼ同時に表示されます。

私はこれまでdisplay:none;に以前のページでは、マップの外に、私のマップ上で私が使用するのと同じ画像を追加することで何をしたか。

私はわからないが、それは減少しましたが表示されているマップと画像間の時間のように思えます。

それはそれを行うための最善の方法であり、それは良い習慣です？

Answer 1

あなたはすなわち、1つのPNGに別々の画像を集めた「スプライト」を使用することができます。これは1負荷、すなわちより少ない別個の負荷を必要とするという利点を担います。 GoogleのGWTはたくさん（すなわち、画像の束）は、この技術をプッシュします。

ローディングを必要とする離散画像の数と、この手法の値が大きくなる：複数の別個の画像は、もはやそれはそれらをロードするのにかかる

。

Answer 2

プリロードのためdisplay:noneを使用しないでください。 display:noneに設定する要素がレンダリングされませんので、それが見えるようにされるまで、のいずれかののその物理的属性から、ブラウザがそれをダウンロードする気にしません。

代替はvisibility:hiddenを使用することですが、あなたはかなり同じことをユーザーエージェントに実行しているのリスクを実行します。 visibility:hiddenは、ブラウザが（寸法を得るために）イメージがロードされている必要があり、画像のためのボックスモデルを計算することが必要です。でも、私は、これはIE6で動作信じていません。

最後の技術（と私のお気に入り）あなたの</body>タグの前に直接のdivを作成することです。 left: -99999999px; top: -99999999pxと、それは絶対位置。ブラウザが画像をレンダリングすることを余儀なくさ（およびその結果としてそれらをロード）とに対処するための全く厄介Javascriptがありませんされます。

さて、あなたの問題でこれを統合するために、ののあなたの「プリロードDIV」の後にGoogleマップのコードを置きます。お使いのブラウザは、マップを作成するためのコードを実行する前に画像をロードするように強制されます。これはあなたの問題を解決する必要があります。

この情報がお役に立てば幸い！

Answer 3

私は、最新のブラウザで思い出したものから、画像は常に（画像のsrcが同じである与えられた）一度ロードされます。私はあなたがマップのロード前にそれらをロードする意味推測ます。

本当に問題ではそれほどないで私の意見で。マーカーは、地図画像自体に比べて比較的軽いべきであると私は本当にとにかくマップせずに使用することはできません。

あなたはそれがあなたのユーザーエクスペリエンスを向上させると考えられる場合は、

そして、私はそれは良い習慣だと思うが、私は初期のページロードでよりきれいな方法、おそらくAJAX呼び出しでそれらを取得しようとするだろう？

プリロード画像を

Ajaxのアクションで見てみましょう