background-image 属性改变时 会出现闪烁现象，以及解决办法

在做一个新需求，音乐播控button  焦点样式和非焦点样式是两幅小图片。 想着用background-image 来实现。 移动焦点时切换background-image属性就可以了。做出来demo后才发现 当第一次切换属性 时 会出现闪烁现象，非第一次就不会出现闪烁现象。

从显示看应该非第一次用到了图片缓存问题，所以就不会出现闪烁现象了。demo如下：

 

.div1_default{
    background-image: url('controls_image/control-play-default.png')
}
.div1_focus{
    background-image: url('controls_image/control-play-focus.png')
}
.div2_default{
    background-image: url('controls_image/control-thumb_up-default.png')
}
.div2_focus{
    background-image: url('controls_image/control-thumb_up-focus.png')
}

<div  style="background-image: url('bg_music.png')">
    <div id="div1" style="width: 128px; height: 128px; display: inline-block">

    </div>
    <div id="div2" style="width: 128px; height: 128px; display: inline-block">

    </div>
</div>

 

document.getElementById("div1").className = "div1_focus";
document.getElementById("div2").className = "div2_default";

document.onkeydown = function (event) {
    if(event.keyCode === 39){
        console.log("right");
        document.getElementById("div1").className = "div1_default";
        document.getElementById("div2").className = "div2_focus";

    }else if(event.keyCode === 37){
        console.log("left");
        document.getElementById("div1").className = "div1_focus";
        document.getElementById("div2").className = "div2_default";

    }
}

 

从代码我们看到 当按左右键时 通过给div background-image 属性 设置不同的值 来实现加载不同图片， 从而实现移动焦点现象。一切看起来不错，但发现第一次移动焦点时 出现了闪烁现象。 

 

从网上搜索了资料，发现可以用雪碧图来解决此问题。 也就是把焦点图片和非焦点图片 合成一张图，然后用background-position属性来控制显示哪副图片。 demo如下：

 

.div1_default{
    background-position: 0% 0%;
}
.div1_focus{
    background-position: 0% 100%;
}
.div2_default{
    background-position: 0% 0%;
}
.div2_focus{
    background-position: 0% 100%;
}

 

<div  style="background-image: url('bg_music.png')">
    <div id="div1" style="width: 128px; height: 128px; display: inline-block; background-image: url('control-play-default.png')">

    </div>
    <div id="div2" style="width: 128px; height: 128px; display: inline-block; background-image: url('control-thumb_down-default.png')">

    </div>
</div>

 

document.getElementById("div1").className = "div1_focus";
document.getElementById("div2").className = "div2_default";

document.onkeydown = function (event) {
    if(event.keyCode === 39){
        console.log("right");
        document.getElementById("div1").className = "div1_default";
        document.getElementById("div2").className = "div2_focus";

    }else if(event.keyCode === 37){
        console.log("right");
        document.getElementById("div1").className = "div1_focus";
        document.getElementById("div2").className = "div2_default";

    }
}