reset <source> srcset when data-srcset changed

[IAluI]

Describe your problem/question I'm using React, responsive image via <picture>, LQIP (Low Quality Image Placeholder) and attrchange plugin.

In first time all works fine. All imagese loads lazy and show LQIP if it needed. But when i change 'data-srcset' in wich already loaded, 'srcset' attribute is not cleared. I understan why 'attrchange plugin' do it, but in this case user see old image. And my goal show LQIP in whis case.

I could clear the 'srcset' attribute in <sourcr> after changing data-srcset, but I afraid that this way I might erase 'srcset' in <source> that has already been processed by attrchange plugin.

Do you have any idea how you can use LQIP and a dynamic image together?

Make it reproduce-able Initial stata:

<picture>
    <source
        media="(min-width: 1280px)"
        data-srcset="http://localhost:3000/images/665/detail-2-4.jpg" />
    <source data-srcset="http://localhost:3000/images/440/detail-2-4.jpg" />
    <img
        alt=""
        class="lazyload obj-cover"
        src="http://localhost:3000/images/120/detail-2-4.jpg"
    />
</picture>

After loading:

<picture>
    <source
        media="(min-width: 1280px)"
        data-srcset="http://localhost:3000/images/665/detail-2-4.jpg"
        srcset="http://localhost:3000/images/665/detail-2-4.jpg" />
    <source
        data-srcset="http://localhost:3000/images/440/detail-2-4.jpg"
        srcset="http://localhost:3000/images/440/detail-2-4.jpg" />
    <img
        alt=""
        class="obj-cover ls-is-cached lazyloaded"
        src="http://localhost:3000/images/120/detail-2-4.jpg"
    />
</picture>

After replace data-src:

<picture>
    <source
        media="(min-width: 1280px)"
        data-srcset="http://localhost:3000/images/665/detail-4-4.jpg"
        srcset="http://localhost:3000/images/665/detail-2-4.jpg" />
    <source
        data-srcset="http://localhost:3000/images/440/detail-4-4.jpg"
        srcset="http://localhost:3000/images/440/detail-2-4.jpg" />
    <img
        alt=""
        class="obj-cover ls-is-cached lazyload"
        src="http://localhost:3000/images/120/detail-4-4.jpg"
    />
</picture>

I apologize for not making a live example. I'm leaving for a trip in an hour. If my explanation is not clear, I will make a live example. Thanks in advance for your answers!

Add tags/keywords low quality image placeholder (LQIP) attrchange plugin react

[aFarkas]

If you erase srcset at the same time you set data-srcset it shouldn't have been added. Because this is done with mutationobserver. But I'm not 100% sure if this will solve your issue because image change by the browser might be also async. Could you test wether it would work. I could then add an option to attrchange plugin to clear srcset automatically for you.

[IAluI]

I'm use React. And data-srcset changes declaratively.

I'm don't understand how i can change srcset and data-srcset at the same time.

But I can erase srcset after updating the component (via componentDidUpdate method in case of class component or useEffect hook in case of functional component). I have implemented this approach. And it seems to work for me.

But I still have concerns that in some cases the mutation observer of attrchange plugin might be called earlier than the React lifecycle methods. I will continue testing.

Thanks for the answer!

[aFarkas]

But I still have concerns that in some cases the mutation observer of attrchange plugin might be called earlier than the React lifecycle methods. I will continue testing.

Yeah, the things are async here. This is a good example were you should favor useLayoutEffect over useEffect (actually it is the right thing to do).

useLayoutEffect(() => {
  if (img.current) {
    img.current.srcset = ''
  }
}, [dataSrcset])

But with that knowledge I might create an option for you.