使用jQuery替换图像扩展名，即实时将.png转换为.gif

Question

因此，我正在使用CSS3来创建我的网站设计中的侧边栏框，这很好用。使用http://css3pie.com以在IE中创建效果。

同样，很好用。现在，出现了问题 -

对于每个相对定位的模块，其中都有一个绝对定位的图标，它被设置为top：-20px以产生弹出效果。显然，在IE6中不起作用，也不与任何PNG修复代码兼容。

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

现在，我的问题是，如果用户使用IE6，如何实现从image.png切换到image.gif？

我还没有找到合理的解决方案。我可以使用IE6样式表替换图片 - 但是有几种情况下，图片不应该基于CSS。它们应该是真正的图片。

有什么建议吗？我想要一些jQuery替换的方式，但我也没有找到合理的解决方案。

- Paul

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);
        });

当然，您需要根据自己的标记修改上面的代码，但这应该能让您开始。

- Jason McCreary

---

element 是一个裸的 DOM 对象，所以你需要执行 $(element).css('background-image');。不过使用属性选择器很好。 - jasongetsdown

你错过了第二行的那个 :) - jasongetsdown

如果在执行replace('.png','.gif')时，您意外替换了文件名，甚至更糟的是替换了URL的其他部分（例如域名），会怎样呢？ - Dalibor

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'); 
            }
        });
    }
});

- Piskvor left the building

---

这样做是可行的，但条件注释比 if(jQuery.browser.msie && jQuery.browser.version <= 6) 更好。 - Josh Stodola

@Josh Stodola：说得好。JScript条件注释是否有测试浏览器版本的功能，还是必须手动检查版本？ - Piskvor left the building

是的，你可以这样做，这是它们的主要目的。但只有IE浏览器才能识别，不是标准。更多信息请参见：http://www.quirksmode.org/css/condcom.html - Josh Stodola

@Josh Stodola：我在考虑JavaScript CC: http://www.javascriptkit.com/javatutors/conditionalcompile.shtml，但HTML CC也可以，是的。 - Piskvor left the building

Answer 3

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

<?php
$useragent = $_SERVER[‘HTTP_USER_AGENT’]);
if (preg_match(‘|MSIE ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘IE’;
    echo ... ;//css selector for Internet Explorer and so on...
} elseif (preg_match( ‘|Opera ([0-9].[0-9]{1,2})|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Opera’;
} elseif(preg_match(‘|Firefox/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Firefox’;
} elseif(preg_match(‘|Safari/([0-9\.]+)|’,$useragent,$matched)) {
    $browser_version=$matched[1];
    $browser = ‘Safari’;
} else {
// browser not recognized!
$browser_version = 0;
$browser= ‘other’;
}
?>

- siannone

Answer 4

你想知道如何替换元素还是如何获取浏览器/版本？

jQuery两者都有相关的功能。

获取浏览器很简单，只需使用jQuery.browser即可。

要更改图像需要针对CSS与<img>采用不同的方法。将所有内容设置为使用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');
    };
}

- jasongetsdown