gokcan/react-shimmer

no image.complete check, problems with baseline-encoded images

DanielRuf opened this issue · 1 comments

The onload triggers when the image starts rendering so when you use big baseline-encoded images the shimmer / custom loaders goes away when it starts rendering line for line.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/complete

So it will look like this:
grafik

How to reproduce:

  • use huge images
  • set a custom loader
  • throttle the network bandwidth in the Chrome devtools settings to the slowest (Slow 3G)

See how imagesloaded for jQuery implemented this: https://github.com/desandro/imagesloaded/blob/master/imagesloaded.js#L284 (but this may have the same issue with baseline-encoded images)