CODEWITHSUNDEEP
imageresponsive-designattributesgruntjs
Mouse6541
Mouse6541

Reputation: 167

Use Grunt to make DOM changes

So I want to use Lazysizes (lazy loading responsive images). Included in my Grunt stack is Responsive Images Extender, which outputs responsive image code (srcset) from simply including an "img" tag with a "src" attribute. Lazysizes requires the "data-srcset" attribute in replace of the "srcset" attribute, however. I added a script to my page that changes the "srcset" attributes to "data-srcset" attributes, but this isn't ideal as images are are already downloaded at runtime. It would be ideal if I could change the tags with Grunt, as there is no advantage in changing them live.

This seems like a very common thing, but I cannot find a good way to do it. String replace doesn't seem like an ideal solution, since it can cause problems if I ever use "srcset=" in my code.

Upvotes: 0

Views: 52

Answers (2)

Stephan Max
Stephan Max

Reputation: 147

I gave the grunt-responsive-images-extender a major makeover and added the possibility to change the attribute name of srcset to anything you want (data-srcset in your case) via the srcsetAttributeName option.

Upvotes: 1

Ahmad Alfy
Ahmad Alfy

Reputation: 13371

There is a grunt tans called dom_munger. With dom_munger you can change HTML attributes and do a lot of interesting stuff; however I cannot find a way to change an attribute name to another thing. Perhapse you can have a better luck checking it.

Upvotes: 0

Related Questions