How can I replace/substitute an attribute name, not its content

Question

On my site, each post starts with an image:

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

and what I'm looking for is to change all image entries to:

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

So basically I want to either:

Append/prefix src with data-

or

Replace/substitute src with data-src

I've looked at .replace() .replaceWith() .before() .insertBefore() and none of them did what I wanted.

A bit of info on why I want to do this. I want to implement unveil.js (lazyload) and one of the requirements is to include the actual image source in a "data-src" attribute. I don't want to mix html with markdown, hence this question.

score 2 · Answer 1 · answered Feb 15 '14 at 15:24

2

You can use:

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

Fiddle Demo

answered Feb 15 '14 at 15:24

Felix

37,892
8
43
55

score 1 · Accepted Answer · answered Feb 15 '14 at 15:23

1

I think the best that can be done is

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

Demo: Fiddle

answered Feb 15 '14 at 15:23

Arun P Johny

384,651
66
527
531

I'm trying this out, when you say the best that can be done, are there any other, more simplified method of doing it? – Feb 15 '14 at 15:25
@Aqeel not as far as I know – Arun P Johny Feb 15 '14 at 15:25
if you're dealing with each element on it'S own (as @Felix does in his answer), you can get rid of the closure as argument to `attr`. Instead you have the `.each()` and a closure inside that one of course - not sure which one is simpler. – Johannes H. Feb 15 '14 at 15:27
technically, you solution loops as well, just inside jQuery. there really isn'T too much difference, technically, between both answers. Non should be more efficient or anything. It's just how they look - I think Felix' one is a little easier to get. Personal preference for sure. – Johannes H. Feb 15 '14 at 15:31
And now another dilemma, both solutions work fine, which one do I check mark on? – Feb 15 '14 at 15:40
@Aqeel for fairness I'd say the one without the two upvotes ;) – Johannes H. Feb 15 '14 at 15:45
@Aqeel both are the same... I think it is upto what you prefer – Arun P Johny Feb 15 '14 at 15:47

Wilmer · Answer 3 · 2014-02-15T15:47:30.300

0

Simple

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

Reverse also works

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

edited Feb 15 '14 at 15:47

answered Feb 15 '14 at 15:34

Wilmer

2,511
1
14
8

this doesn't remove the "old" attribute. – Johannes H. Feb 15 '14 at 15:35
the author doesn't mention removal – Wilmer Feb 15 '14 at 15:39
no, but "substitution", which is "remove one and add another one instead". – Johannes H. Feb 15 '14 at 15:42
I have to agree with @JohannesH. the before and after code is clear as to what I want. – Feb 15 '14 at 15:45

score 0 · Answer 4 · edited May 23 '17 at 12:05

I will answer in regard to your question but also to your scenario of use.

You're using unveil.js to boost performance but the method you're using does the opposite. This method is actually invalid

use the smallest gif image as your src and then use the data-src with the actual image src.

If you do it the way you're presenting there is no use of unveil.js since the browser will pull the image right away before even using/initiallizing unveil.js.

Suggestions (two scenarios):

1) SERVER HTML - change all images to use the method above directly on the sever. When your content is downloaded on the browser initialize unveil.js and let it do its job.

2) AJAX GET REQUEST (HTML OR JSON) - if you get your content with ajax, before your inject it and while it is still in the form of a string you can apply a regex such as: postContent.replace(/src=/gi, "data-src=") in order to replace every occurrence of src= to data-src=. After injecting your content to the dom, execute the unveil.js init function.

How can I replace/substitute an attribute name, not its content

4 Answers4