Remove HTML attribute before rendering

Question

Is it possible to remove src attribute for each img tag before image is fetched ? I want to change image fetching behavior.

What I did:

$('img').each(function() {
    var elem = $(this);
    elem.removeAttr('src');
    // ... my custom actions
});

What happened: Image is fetched, before src attribute is removed :/

Thanks

Have your tried to accomplish this on your own yet? Please post specific code and any issues you are having. — Russ J
– Russ J, Commented Feb 26, 2019 at 14:13
Possible duplicate of Changing HTML Data Before Page Rendering — Luca Angioloni
– Luca Angioloni, Commented Feb 26, 2019 at 14:20

Huangism · Accepted Answer · 2019-02-26 14:25:27Z

2

If your src is in the markup then it will fetch before your js execute. Simply don't use src attribute, put the src in say data-src, then grab it with js and do what you want to do.

answered Feb 26, 2019 at 14:25

Huangism

16.5k7 gold badges51 silver badges75 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dina Over a year ago

This is i want to avoid because the project I am working on is very big. But I realized that there is no solution except changing src attributes to data-* manually. Thanks for your response :)

Huangism Over a year ago

If you are worried about SEO, you could also use an anchor tag with the href pointing to the image and then use js to change them into image tags. This way you will have better seo because the image will be indexed and you are not loading them on load. In our own project, we use a div tag with all the info needed in data attributes then output the right image depending on screen size

Collectives™ on Stack Overflow

Remove HTML attribute before rendering

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related