jquery - 使用 jquery 与另一个图像交换时图像闪烁

Question

我有 2 张图片，我想在页面加载时交替显示。下面是我想要的 jsfiddle 链接:

http://jsfiddle.net/8mMZn/

HTML:

<span class="solar-panel" title="Solar Panel"></span> 

CSS:

.solar-panel {position:absolute;  left:280px; width:103px; height:83px;background:url(http://s28.postimg.org/q0ukhrf5l/solarpanel.png) no-repeat; }
span.solar-panel-grey {background:url(http://s16.postimg.org/5kik3yfm9/solarpanelshine.png) no-repeat;}

JS:

$(window).load(function () {
    HomePageAnimation.panelShine();
});

var HomePageAnimation = {
    panelShine: function(){ 
        var index, timesRun, interval,solarPanel;
        index =0;
        timesRun = 0;
        solarPanel = $("span.solar-panel");
        interval = setInterval(function(){
            timesRun += 1;
            if(timesRun === 8){
                clearInterval(interval);
            }
            switch(index){
                case 0:
                    solarPanel.addClass("solar-panel-grey");
                    index = 1;
                    break;
                case 1:
                    solarPanel.removeClass("solar-panel-grey");
                    index = 0;
                    break;
            }
        },600);     
    }

};

使用的 2 个图像是 1) solarpanel.png 和 2) solarpanelshine.png

在页面加载时显示“太阳能电池板”。当您第一次运行该页面时，您会看到第一个图像“solarpanel”消失/闪烁一次，然后图像交换动画正常工作。 当您再次运行此页面时，它会正常工作。如果您清除缓存(我正在使用 chrome - Ctrl + F5)并再次运行，第一个图像将再次消失/闪烁。 我怎样才能避免这种情况？

只有当图像从服务器提供时才会发生这种情况，而不会发生在本地。

Answer 1

CSS 图像只有在页面上呈现时才会下载，因此在您第一次更改类之前不会下载第二张图像。我会将它们都剪切成一个图像并切换背景位置而不是背景图像 URL。该技术称为 CSS Sprites，是性能的良好实践，因此值得一试:

http://css-tricks.com/css-sprites/