Googleマップのマーカーアニメーションの画像をプリロードする方法

Question

ChromeのGoogleマーカーマーカーのアニメーションに問題があります（私のバージョンは51です）。アニメーションは、マーカーのiconプロパティで参照されるイメージパスを交換することによって機能します。追加の画像を最初に読み込んでいるため、最初の反復では点滅します。だから私はイメージをプリロードするためにこれを私のページに追加しました。

<div style="display:none"> 
    <img src="images/greenCar.png" /> 
    <img src="images/greenCarSigs1.png" /> 
    <img src="images/greenCarSigs2.png" /> 
</div> 

画像はさらにありますが、簡潔にするために短いバージョンです。私はボディータグを閉じる前にこれを追加しました。 これは問題を解決するはずですが、それは不思議ですが、ではありません。私は待っても、$ document.readyの中に2秒のsetTimeout（）を使うので、これらのイメージはキャッシュになければなりません。

これはChrome 51.0.2704.103で発生しています。私が持っているFirefox 47.0のバージョンでは起こりません。うまくいきます。 Chromeが表示されるように設定されていない限り、画像をキャッシュしない場所がありますか？もしそうなら、どうすればいいですか？ここに私のjavscriptがありますが、それは問題とは関係ないと思うし、2回目の繰り返しから完全には動かないでしょう。あなたが使用しているHTMLを表示するように設定されているので

function tongueAnimation() { 
    //if animation has run six or less icon image swaps 
    if (runcount < 7) { 
     moveTongue(); 
    } 
    else { 
     //runcount gets set to 1 for counting handAnimation which will now be called 
     runcount = 1; 
     orderMarker.setIcon("images/hungry" + runcount + ".png"); 
     setTimeout(handAnimation, 500); 
     //handAnimation(); 
    } 
} 

//sets the icon image for the marker 
function moveTongue() { 
    //images are named hungry1, hungry2 ... so the count decides which image name will be used 
    orderMarker.setIcon("images/hungry" + runcount + ".png"); 
    //count that fact that moveTongue has been called 
    runcount++; 
    //call the function that invoked this one 
    setTimeout(tongueAnimation, 150); 
} 

function handAnimation() { 
    //if animation has run six or less icon image swaps 
    if (runcount < 7) { 
     moveHands(); 
    } 
    //else reset runcount to original value of 2 and start over by calling tongueAnimation after three seconds 
    else { 
     runcount = 2; 
     setTimeout(tongueAnimation, 150); 
    } 
} 

function moveHands() { 
    if (orderMarker.icon != "images/hungryDown.png") { 
    orderMarker.setIcon("images/hungryDown.png"); 
    } 
    else { 
     orderMarker.setIcon("images/hungry1.png"); 
    } 
    runcount++; 
    setTimeout(handAnimation, 250); 
} 

$(document).ready(function() { 
    setTimeout(tongueAnimation, 2000); 
} 

Answer 1

は<link rel='prefetch'>または<link rel='preload'>

https://css-tricks.com/prefetching-preloading-prebrowsing/

Answer 2

は：なし、画像が描画されることはありません飽きません。代わりにそのdivに1pxの幅と高さを与え、オーバーフローを隠してみてください。

もう1つの考えられる方法は、各画像ソースを変数として保存してから、画像を再取得する代わりにその変数を呼び出すことです。