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()做到这^{一点是什么？} ：

$('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).data('path')替换this.getAttribute() ，因为jQuery data attributes这些data attributes解析为它的“节点”数据哈希。 但这会创建另一个jQuery对象，此时此刻真的是不必要的。

Answer 2

这应该工作：

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

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

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

Answer 3

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