在Javascript中压缩图像源路径答案

【问题标题】：Compressing Image Source path in Javascript在Javascript中压缩图像源路径
【发布时间】：2011-12-13 19:37:39
【问题描述】：

我有一个网络应用程序，它用其他 img 替换了几个 img。

例如：路径为http://example.com/example/example/images/dir/1.gif 的图像替换为http://cdn.example.com/dir/1.gif。

为此，我使用 jQuery attr()。

所以我的代码看起来像这样：

$('img[src="http://www.example.com/dir/images/dir/1.gif"]').attr('src', "http://cdn.example.com/dir/1.gif");
$('img[src="http://www.example.com/dir/images/dir/2.gif"]').attr('src', "http://cdn.example.com/dir/2.gif");
$('img[src="http://www.example.com/dir/images/dir/3.gif"]').attr('src', "http://cdn.example.com/dir/3.gif");
$('img[src="http://www.example.com/dir/images/dir/4.gif"]').attr('src', "http://cdn.example.com/dir/4.gif");
$('img[src="http://www.example.com/dir/images/dir/5.gif"]').attr('src', "http://cdn.example.com/dir/5.gif");
$('img[src="http://www.example.com/dir/images/dir/6.gif"]').attr('src', "http://cdn.example.com/dir/6.gif");
$('img[src="http://www.example.com/dir/images/dir/7.gif"]').attr('src', "http://cdn.example.com/dir/7.gif");
$('img[src="http://www.example.com/dir/images/dir/8.gif"]').attr('src', "http://cdn.example.com/dir/8.gif");
$('img[src="http://www.example.com/dir/images/dir/9.gif"]').attr('src', "http://cdn.example.com/dir/9.gif");
$('img[src="http://www.example.com/dir/images/dir/10.gif"]').attr('src', "http://cdn.example.com/dir/10.gif")

那么有没有办法压缩这个？所以写的字少了？

注意：在每一行中，两个网站上的图片都是相同的。例如，1.gif 再次替换为 1.gif，但使用了不同的服务器。 所以基本上我想更换服务器。当http://www.example.com/dir/images/dir/ 替换为http://cdn.example.com/dir/。

非常感谢

【问题讨论】：

如果这是出于性能原因（带宽分配），您应该在服务器端执行此操作。
+1 Phil，使用 CDN 来提高性能，但如果您在页面加载后执行此操作，即旧图像已经加载，然后您正在执行替换，那实际上是在提高性能更糟
@Phil 图片是从 API 中检索的。因此，不幸的是，我无法更改服务器端

标签： jquery image replace attr imagesource

【解决方案1】：

就像使用循环一样简单：

var i;
for ( i = 1; i <= 10; i++ )
{
  $('img[src="http://www.example.com/dir/images/dir/'+i+'.gif"]').attr('src','http://cdn.example.com/dir/'+i+'.gif');
}

或者您是否要求查找并替换所有人？

你可以使用attr starts with selector:

$('img[src^="http://www.example.com/"]').each(function(index,element){
  var $this, src, newSrc;
  $this = $(this);
  src = $this.attr('src');
  //do your replacement here
  newSrc = src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
  $this.attr('src', newSrc);
});

正如 Moin Zaman 指出的那样，attr 也可以将函数作为参数，这将这个脚本缩短为：

$('img[src^="http://www.example.com/"]').attr('src', function(index, src){
  return src.replace('www.example.com/dir/images/dir', 'cdn.example.com/dir');
});

【讨论】：

为此使用循环是多余的。属性选择器更好，但你不需要 .each
@zzzzBov 谢谢。图像名称是随机的。可以是任何东西，所以我的第一个选择不起作用。至于第二个选项，你能解释一下 img[src^=" 吗？为什么我必须包含 ^ ？
@jQuerybeast 看看我下面的答案，以了解 ^= 的解释以及做你想做的更好的方法
@zzzzBov 先生，我可以更改扩展名吗？提前致谢。从 gif 到 png

【解决方案2】：

你需要 JavaScript 的 .replace() 方法和正则表达式来替换东西。

在 jQuery 中，属性选择器^= 表示查找以开头的属性值。

试试这个，我假设它的所有图片都以“www.example.com”开头：

$('img[src^="http://www.example.com/dir/images/dir"]').attr('src',
    function(i,src){ 
        return src.replace('example.com/dir/images/dir','cdn.example.com/dir') 
});

【讨论】：

反对票不是来自我。感谢您的回答。一会儿我会检查的。