Flash of missing image when lazy loading

A comment from the maintainer in 🐛 Lazy load images not replaced correctly Active :

Regarding the "flash", we unset the src for lazy loaded images to prevent them from being loaded by the browser. It prevents duplicate images being loaded in some cases. However, if an image is in the viewport, removing the source can cause this flash. I think we might be able to figure something out to solve this.

This least stops the broken image from appearing but still there is a small flicker

I tested the changes and the broken image doesn't appear anymore. In a project we added this to make the flicker stand out less, but it might be too opinionated to add to the module:

img[data-srcset] {
    opacity: 0;
    transition: opacity 150ms ease;

    &[data-loaded="1"] {
        opacity: 1;
    }
}

I'm not sure about these workarounds for the flash being added to the module. We probably shouldn't be to opinionated about this. It might make sense to add the CSS example to the README file and point to this issue?

What would be a reason to leave though? Don’t think it would be a regression on any site to fix the flash

There are multiple ways CSS can make the flash less obvious. The problem is it depends on the design of the site what the best way would be to fix it. If we add a solution for this, some sites would have no problem with it, but other ones might have to add CSS to undo/change it. Some sites might not even care about this flash.

I guess in the end it is up to developers and designers how to best solve this, and for that reason I think we could document ways to improve this, but prevent adding stuff developers might have to undo. 🐛 Make lazy loading more like the native browser behavior Active would also be a an improvement to load images earlier for browsers with a good connection, which would also mitigate this problem.

Thanks for the changes, this looks good! I will try to test it shortly. If other people can check this out and RTBC that would also help!

Was #10 meant for another ticket?

Whoops! Yes it was. Sorry about that.

Due to the inline style `style="visibility: hidden"`. I've got not image when Media can be added to WYSIWYG field using responsive image view modes.