jQuery在img src属性中添加URL前缀

Question

我只需要一个jQuery代码片段来在img src中执行prepend，例如：

<img src='/img/picture1.jpg' />

代码片段jQuery是为了在此URL前置。

http://cdn.something.com/ 

所以在使用jQuery代码片段后，它会变成如下：

<img src='http://cdn.something.com/img/picture1.jpg' />

任何帮助都将不胜感激。

到目前为止，我写了一些东西。

$().ready(function(){
     var cdn ='http://cdn.something.com';
   $('img').attrib('src', cdn);

});

然而，它替换的是src而不是pre。

- dbwebtek

Answer 1

这与jQuery无关，但是你可以使用.attr()^{这是什么？}来实现：

$('img').attr('src', function(index, src) {
     return 'http://cdn.something.com' + src;
});

这将影响您标记中所有<img>节点并替换src。

无论如何，我不确定这是一个好主意。在DOMready事件触发时，浏览器可能已经尝试访问old源属性。如果您必须在JavaScript中执行此操作，则最好将path info存储在自定义的data attribute中，以便浏览器不会尝试加载图像。这可能看起来像：

HTML

<img src='' data-path='/img/picture1.jpg' />

JS

$(function() {
    $('img').attr('src', function(index, src) {
       return 'http://cdn.something.com' + this.getAttribute('data-path');
    });
});

这样应该可以。您可以将this.getAttribute()替换为$(this).data('path')，因为jQuery将这些data属性解析为其“节点”数据哈希表。但是这会创建另一个jQuery对象，而在此时这确实是不必要的。

- jAndy

---

难道不应该是 return 'http://cdn.something.com' + src; 吗？因为 img 标签的 src 已经以 / 开头了。 - Clyde Lobo

@dbwebtek：不用谢！如果你认为回答有用且正确，可以考虑接受一个答案。 - jAndy

@jAndy 你能解释一下为什么浏览器不会尝试加载这个图片吗？因为它看到了图片标签，为什么不尝试渲染呢？ - Bram Vanroy

Answer 2

这应该可以运行：

$.ready(function() {
    $('img').each(function() {
        $(this).attr('src', cdn + $(this).attr('src'));
    });
});

然而，我不确定使用CDN是否是一个好的解决方案，因为在调用脚本时，浏览器已经尝试从您的服务器加载图像。

您应该在服务器端执行此操作。

- Arnaud Le Blanc

---

是的，你说得对，浏览器在脚本等待文档对象模型(DOM)就绪之前会快速加载图像...我可以在转换期间看到FLASH...感谢评论。 - dbwebtek

干得好，伙计 :) - Rizwan Zaheer

Answer 3

根据您的具体问题，您可能可以使用base标签解决此问题，但我假设您只想在图像上使用它，但是一旦页面加载后更改src将使图像重新加载？如果图像不存在于当前位置，则需要在页面加载之前（服务器端）更改src属性。

- Dunhamzzz