如何預加載Google地圖標記動畫圖像

我在Chrome中使用谷歌標記標記動畫時存在初始閃爍問題（我的版本爲51）。動畫通過交換標記圖標屬性中引用的圖像路徑來工作。它在第一次迭代中閃爍，因爲它是第一次加載額外的圖像。所以爲了解決這個問題，我將這個添加到了我的頁面中以預載圖像。如何預加載Google地圖標記動畫圖像

<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以防萬一，但我不認爲它與這個問題有任何關係，或者它不會在第二次迭代中完美運行。

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); 
}

來源

2016-07-06 user192632

嘗試<link rel='prefetch'>或<link rel='preload'>

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

來源

2016-07-06 19:17:43 btraas

這是有效的。我採取了爲標記創建動畫gif，因爲我發現如果將標記優化屬性設置爲false，它將播放gif。所以現在它必須加載必要的圖像，並且可以無縫工作。但我肯定會記住這個解決方案，因爲它是一個很好的解決方案。謝謝。 – user192632

由於您使用的HTML設置爲display：none，所以圖像永遠不會呈現。嘗試改爲在隱藏溢出的情況下給該div一個1px的寬度和高度。

另一種可能的方法是將每個圖像源存儲爲變量，然後調用該變量而不是重新獲取圖像。

來源

2016-07-06 19:08:39 will

感謝。這是一個很有意思的想法，雖然我甚至不希望1px的空間被佔用，儘管我可以把它放在底部，這將是無足輕重的，但也許這可能是唯一的答案。 – user192632

您可以添加位置：絕對，然後給它一個負餘量讓它離開屏幕，雖然我不確定是否離屏會阻止它加載。如果您有任何固定位置的導航元素，您可以將它放置在那裏。 – will

這就是我最後一次評論後纔想到的。在嘗試中，但它可能一直工作。我會讓你知道是否在測試後添加該答案作爲答案。 thx – user192632

如何預加載Google地圖標記動畫圖像

回答

相關問題