Question

在我的网站上，每篇文章都以图片开头：

<img src="sample.jpg" alt="sample alt" />

我正在寻找的是将所有图像条目更改为：

<img data-src="sample.jpg" alt="sample alt" />

基本上我想要：

使用src

data-

或

用src

data-src

我查看了.replace() .replaceWith() .before() .insertBefore()，但没有一个符合我的要求。

关于我为什么要这样做的一些信息。我想实现unveil.js（lazyload），其中一个要求是将实际的图像源包含在“data-src”属性中。我不想将html与markdown混合，因此这个问题。

Answer 1

您可以使用：

$('img').each(function(i, el){
    $(el).attr('data-src', $(el).attr('src')).removeAttr('src');
});

<强> Fiddle Demo

Answer 2

我认为可以做的最好的事情是

$('img[src]').attr('data-src', function(){
    return $(this).attr('src')
}).removeAttr('src');

演示：Fiddle

Answer 3

简单

$('img').each(function( index ){
    $(this).data('src', $(this).attr('src')).removeAttr( "src" );
});

反向也有效

$('img').each(function( index ){
    $(this).attr('src', $(this).data('src')).removeData( "src" );
});

Answer 4

我会回答您的问题，但也会回答您的使用情况。

你正在使用unveil.js来提升性能，但你使用的方法恰恰相反。这个方法实际上是invalid

使用smallest gif图像作为src，然后将data-src与实际图像src一起使用。

如果按照你提交的方式进行操作，则不会使用unveil.js，因为浏览器会在使用/初始化unveil.js之前立即拉出图像。

建议（两种情况）：

1）SERVER HTML - 更改所有图像以直接在服务器上使用上述方法。当您在浏览器上下载内容时，初始化unveil.js并让它完成其工作。

2）AJAX GET REQUEST（HTML或JSON） - 如果你使用ajax获取你的内容，在你注入它之前它仍然是一个字符串的形式你可以应用一个正则表达式，如：postContent.replace（/ src = / gi，“data-src =”）in为了将每次出现的src =替换为data-src =。将内容注入dom后，执行unveil.js init函数。

如何替换/替换属性名称，而不是其内容

4 个答案: