在jQuery中替换图像扩展,动态从.png到.gif

Question

所以,我正在使用CSS3来在我的网站设计中创建侧边框,这很好用,花花公子.使用http://css3pie.com以在IE中创建效果.

再次,漂亮和花花公子.现在,来我的问题 -

对于每个相对定位的模块,其中有一个绝对定位的图标,设置为顶部:-20px以便为其提供弹出效果.显然这在IE6中不起作用,并且它对任何PNG修复代码都不起作用.

但是,对于IE6用户,我可以切换到低质量的gif,他们可以处理它.

现在,我的问题是,如果用户使用IE6,如何设置live-switch image.png到image.gif？

我还没有为这个想法找到合理的解决方案.我可以使用IE6样式表来替换图像 - 但是有几个实例的图像不应该是基于CSS的.它们应该是正确的图像.

有什么建议？我想要某种jQuery替换,但我还没有找到合理的解决方案.

Answer 1

有几种解决方案.可能最简单的方法是创建一个jQuery函数,该函数在用户切换到低保真站点时(通过链接)调用,或者代表他们(通过标题或条件注释)确定.

jQuery函数可以利用属性选择器使生活更轻松.

function switch_to_low_fi() {
        $('img[src$=".png"]').each(function(index,element) {
          element.src = element.src.replace('.png','.gif');
        });
}

要切换CSS背景,我建议使用degrade或者类似的东西对它们进行分类,以便为jQuery创建一个钩子,然后执行与上面类似的操作.

        $('.degrade').each(function(index,element) {
          element = $(element);
          var background = element.css('background-image');
          background = background.replace('.png','.gif');
          element.css('background-image', background);
        });

当然,您需要根据您的标记修改上面的代码,但这应该可以帮助您入门.