在jQuery中替换图片扩展，从.png到.gif [英] Replacing image extensions in jQuery, go from .png to .gif on the fly

问题描述

所以，我使用CSS3为了在我的网站设计中创建侧边栏框，这工作很好和dandy。使用 http://css3pie.com 为了在IE中创建效果。

So, I'm using CSS3 in order to create sidebar boxes in my site design, this works nice and dandy. Using http://css3pie.com in order to create the effect in IE.

再次，好和dandy。现在，我的问题 -

Again, nice and dandy. Now, comes my issue -

对于每个相对定位的模块，其中有一个绝对定位的图标，被设置为top：-20px为了给它弹出效果。显然，这不工作在IE6，以及它不工作与任何PNG修补程序代码。

For each relatively positioned module, there is an absolutely positioned icon within it, that is set to being top: -20px in order to give it a pop-out effect. Obviously this doesn't work in IE6, as well it doesn't play nice with any PNG fix codes.

但是，对于IE6用户，我可以切换到低

However, for IE6 users I can switch to a low-quality gif instead, and they can deal with it.

现在，我的问题是，我如何管理live-switch image.png到image.gif如果用户是使用IE6吗？

Now, my question is, how can I manage to live-switch image.png to image.gif if the user is using IE6?

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

I have yet to find a reasonable solution for this idea. I could use an IE6 stylesheet to replace the images - however there are several instances where images shouldn't be CSS-based. They should be proper images.

有任何建议吗？我想某种一个jQuery的更换，但我还没有发现应该是一个合理的解决方案，无论是。

Any suggestions? I wanted some sort of a jQuery replace, but I haven't found a reasonable solution for that either.

推荐答案

有几个解决方案。可能最简单的是创建一个jQuery函数，当用户切换到low-fi站点（通过链接）或您确定它（代表头或条件注释）时调用。

There are several solutions. Probably the easiest would be to create a jQuery function that was called when the user switches to the low-fi site (by link) or you determine this on their behalf (by headers or conditional comment).

jQuery的功能，可以利用属性选择，使生活更轻松。

The jQuery function could utilize attribute selectors to make life easier.

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

要切换CSS背景，我建议使用 degrade 或者某些排序可以为jQuery创建一个钩子，然后做类似上面的操作。

To switch the CSS backgrounds, I would recommend classing them with degrade or something of the sort to create a hook for jQuery, then doing something similar as the above.

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

当然，你需要修改上面的代码，开始。

Of course, you will need to modify the code above base on your markup, but that should get you started.

这篇关于在jQuery中替换图片扩展，从.png到.gif的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！