Flicker when using placeholder image

[sunknudsen]

Bug description

I am using placeholder to always display images but in low resolution. I do so because I don’t know the size of images ahead of time and use in-page anchors for navigation (this breaks when the browser can’t figure out the position of elements because images aren’t rendered). I use width="100%" and let the browser determine the height using the natural aspect ratio. This all worked perfectly before, but when using LazyLoadImage, a flicker occurs when high resolution images (that aren’t cached) are rendered (see animated gif where first cover image is cache vs the three others).

To Reproduce

<LazyLoadImage
  src={src}
  placeholder={<img src={thumbnailSrc} alt={props.alt} width="100%" />}
  scrollPosition={props.scrollPosition}
  alt={props.alt}
  width="100%"
/>

Expected behavior

No flicker

Screenshots

Technical details:

• Package version? 1.4.1
• Server Side Rendering? No
• Device? Desktop (but probably both)
• Operating System? macOS
• Browser? Firefox, Chrome, Safari (issue present of all three)

[sunknudsen]

I believe this might have something to do with the fact the placeholder is removed before high resolution images are loaded.

[EliRobinson]

I'm running into this too, I believe it has something to do with the placeholder being removed from the DOM sooner than the image itself is loaded, which gives the flash. What would be preferable is that the placeholder is over the expected image until the image is guaranteed loaded, then remove the placeholder in the DOM.

If you break on the parent of the lazy loader, you can step through and see where the placeholder is removed prior to the image being placed into the DOM.

[grctest]

Also experiencing this, any workaround?