CSS精灵效果最好。我尝试切换类和使用jQuery操纵'background-image'属性，没有工作。我认为这是因为浏览器(至少是最新的稳定Chrome)不能“重新加载”已经加载的图像。

好处:CSS精灵下载和显示速度更快。更少的HTTP请求意味着更快的页面加载。减少HTTP的数量是提高前端性能的最佳方法，所以我建议一直走这条路。

我在一个论坛上找到了一个解决方案，切换背景Img。

我的是动画:

$(this).animate({
    opacity: 0
}, 100, function() {
    // Callback
    $(this).css("background-image", "url(" + new_img + ")").promise().done(function(){
        // Callback of the callback :)
        $(this).animate({
            opacity: 1
        }, 600)
    });    
});

我总是使用时间戳来防止浏览器缓存图像。例如，如果用户正在旋转他们的头像，它通常会被缓存并且看起来没有改变。

var d = new Date();
var t = d.getTime();

$('#avatar').css("background-image", "url(" + iPath + "?" + t + ")");

$('#divID').css("background-image", "url(/myimage.jpg)");  

应该这样做，只是在元素上的点击事件中连接它吗

$('#divID').click(function()
{
  // do my image switching logic here.
});

使用jQuery有两种不同的方法来更改背景图像CSS。

$('选择'). css(“分辨率”,“url(图片/ example.jpg)”); $('选择'). css({“背景图像”:“url(图片/ example.jpg)”});

仔细观察，注意不同点。在第二种方法中，您可以使用传统的CSS并将多个CSS属性串在一起。