logo标签列表

使用jQuery切换DIV背景图片

jquery
212

我正在为我工作的公司制作一个可展开/折叠的通话费率表。目前，我已经有了一个带有按钮的表格来展开它，按钮上写着“展开”。它是可用的，但是当单击按钮时，我需要将按钮更改为“折叠”，然后当再次单击它时，将其更改回“展开”。按钮上的文字是背景图像。

所以基本上，所有我需要做的就是在单击时更改div的背景图像，类似于切换操作。

3
为什么需要一个背景图片？为什么不用文字？ - uınbɐɥs
1
我投了反对票，因为他几年前没有接受答案，但希望@user1040899没事！ - gsamaras
@user1040899 zuk1 上次出现在 SO 是 Aug 9 '10 at 0:42，可能就是这个原因，:( - M. Junaid Salaat
14个回答
3
我常常会使用时间戳来防止浏览器缓存图片。例如，如果用户在旋转他们的头像，它经常会被缓存并且看起来没有改变。
var d = new Date();
var t = d.getTime();

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

这是一个相当简单的响应，它可以通过项目列表更改网站的背景

function randomToN(maxVal) {
    var randVal = Math.random() * maxVal;
    return typeof 0 == 'undefined' ? Math.round(randVal) : randVal.toFixed(0);
};
var list = [ "IMG0.EXT", "IMG2.EXT","IMG3.EXT" ], // Images
    ram = list[parseFloat(randomToN(list.length))], // Random 1 to n
    img = ram == undefined || ram == null ? list[0] : ram; // Detect null
$("div#ID").css("backgroundImage", "url(" + img + ")"); // push de background
简单？它可以更简单。为什么要随机？ - uınbɐɥs
因为用户更容易看到背景的变化，并进行更改 :)。对我的英语表示抱歉。 - user952141
2
欢迎来到 Stack Overflow，Sebastian。这个问题已经在一年前被提出，并且已经有几个可接受的答案了。 - rjh
2

CSS Sprites效果最佳。我尝试使用jQuery切换类和操作“background-image”属性，但都没有成功。我认为这是因为浏览器（至少是最新稳定版的Chrome）无法“重新加载”已经加载过的图像。

额外收获：CSS Sprites下载和显示速度更快。减少HTTP请求意味着页面加载更快。减少HTTP请求数是改善前端性能的最佳方法，因此我建议始终采用这种方式。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接