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