用jQuery切换DIV背景图像

我正在为我工作的公司制作一个扩展/崩溃电话费率表。我目前有一个表下面有一个按钮来展开它，按钮说“展开”。它是功能性的，除了我需要按钮改变为“折叠”时，它被点击，然后当然回到“展开”时，再次点击。按钮上的文字是背景图像。

所以基本上我所需要的是改变一个div的背景图像时，它被点击，除了有点像一个切换。

当前回答

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

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

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

2019-11-25 11:12:24

其他回答

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

2010-03-24 15:43:47

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

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

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

2019-11-25 11:12:24

这适用于WinXP上的所有当前浏览器。基本上就是检查当前的背景图像是什么。如果是image1，则显示image2，否则显示image1。

jsapi只是从谷歌CDN加载jQuery(更容易在桌面上测试misc文件)。

替换是为了跨浏览器兼容(opera和ie为url添加引号，而firefox、chrome和safari删除引号)。

<html>
    <head>
        <script src="http://www.google.com/jsapi"></script>
        <script>
          google.load("jquery", "1.2.6");
          google.setOnLoadCallback(function() {
            var original_image = 'url(http://stackoverflow.com/Content/img/wmd/link.png)';
            var second_image = 'url(http://stackoverflow.com/Content/img/wmd/code.png)';

            $('.mydiv').click(function() {
                if ($(this).css('background-image').replace(/"/g, '') == original_image) {
                    $(this).css('background-image', second_image);
                } else {
                    $(this).css('background-image', original_image);
                }

                return false;
            });
          });
        </script>

        <style>
            .mydiv {
                background-image: url('http://stackoverflow.com/Content/img/wmd/link.png');
                width: 100px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="mydiv">&nbsp;</div>
    </body>
</html>

2008-10-31 14:33:57

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

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

2012-03-05 19:06:50

如果你为背景图像使用CSS精灵，你可以根据你是在展开还是折叠背景偏移+/- n个像素。不是切换，但比切换背景图像url更接近切换。

2008-10-31 14:32:54

用jQuery切换DIV背景图像

推荐文章

最新文章

标签