如何预加载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地图标记动画图像

回答

相关问题