jQuery在img src属性中添加URL

Question

我只需要一个jQuery片段来完成img src中的前置，即

<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

Answer 1

它与jQuery无关，无论如何你可以用.attr() ^{what is that?} 来实现：

$('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 attributes解析为它的“节点”数据哈希。但是这会创建另一个jQuery对象，此时此实际上是不必要的。

Answer 2

这应该有效：

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

但是我不确定它是否是使用CDN的好方法，因为浏览器在调用脚本时已经尝试从服务器加载图像。

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

Answer 3

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