Question

我在Chrome中使用谷歌标记标记动画时出现了初始闪烁问题（我的版本是51）。动画通过交换标记的图标属性中引用的图像路径来工作。它在它的第一次迭代中闪烁，因为它是第一次加载其他图像。因此，为了解决这个问题，我将其添加到我的页面中以预加载图像。

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

Answer 1

由于您使用的HTML设置为display：none，因此图像永远不会被渲染。尝试将该div的宽度和高度设置为1px，并隐藏溢出。

另一种可能的方法是将每个图像源存储为变量，然后调用该变量而不是重新获取图像。

Answer 2

尝试<link rel='prefetch'>或<link rel='preload'>

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

如何为谷歌地图标记动画预加载图像

2 个答案: