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

所以，我正在使用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); }); 

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

Answer 2

这适用于页面上的所有非CSS图像：

 // when DOM is loaded jQuery(document).ready(function(){ // and browser is MSIE 6 or lower if (jQuery.browser.msie && jQuery.browser.version <= 6) { // go through every IMG jQuery('img').each(function(index,element){ // if there's a .png in the source, I'll assume it's at the end // (of course, more complex test could be made) ... if (element.src.indexOf('.png') != -1) { // ...and replace it with a GIF version element.src = element.src.replace('.png','.gif'); } }); } }); 

Answer 3

您可以在CSS中使用此PHP代码来了解正在使用的浏览器：

Answer 4

您想知道如何更换元素或如何获取浏览器/版本？

jQuery有两种设施。

获取浏览器非常简单。 只需使用jQuery.browser 。

要更改图像，需要针对CSS与采用不同的方法。 将所有内容设置为使用PNG，然后执行以下操作：

 if ( useGIF() ) { var src; $('img').each(function() { src = $(this).attr('src'); $(this).attr('src', src.substr(0, src.length-3) + 'gif'); }; $('.has_bg_png').each(function() { src = $(this).css('background-image'); $(this).css('background-image', src.substr(0, src.length-3) + 'gif'); }; }