如何为Google Maps标记动画预加载图像

Question

I am having an initial flickering problem with a google markers marker animation in Chrome (my version is 51). The animation works by swapping out image paths referenced in the marker's icon property. It flickers in it's first iteration because it is loading the additional images for the first time. So to cure that, I added this to my page to preload the images.

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

There are more images, but that is the short version for brevity. I added this right before my body tag close. So this is supposed to fix the problem, but strangely enough, it does not . I even wait and use a setTimeout() of 2 secs inside of $document.ready, so these images should be in cache.

This is happening in Chrome 51.0.2704.103. Doesn't happen in Firefox 47.0 version that I have and it works fine. So is there something about Chrome where it won't cache images unless they are set to be displayed? If so, what to do? Here's my javscript just in case, but I don't think it has anything to do with the problem or it wouldn't run perfectly from the second iteration on.

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

Because the HTML you're using is set to display:none, the images never get rendered. Try instead giving that div a width and height of 1px with the overflow hidden.

Another possible approach is storing each of your image sources as a variable, then calling that variable instead of re-fetching the image.

Answer 2

Try <link rel='prefetch'> or <link rel='preload'>

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