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:
src with data-or
src with data-srcI'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.
I think the best that can be done is
$('img[src]').attr('data-src', function(){
return $(this).attr('src')
}).removeAttr('src');
Demo: Fiddle
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments