替换 jQuery 中的图像扩展名，即时从 .png 变为 .gif

Question

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

再说一次，又好又花花公子。现在，我的问题来了 -

对于每个相对定位的模块，其中都有一个绝对定位的图标，将其设置为 top: -20px 以使其具有弹出效果。显然这在 IE6 中不起作用，并且它与任何 PNG 修复代码都不能很好地配合。

不过，对于 IE6 用户，我可以改用低质量的 gif，他们可以处理。

现在，我的问题是，如果用户使用 IE6，如何将 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 代码来了解正在使用的浏览器：

<?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’;
}
?>

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