gokcan / react-shimmer

🌠 Async loading, performant Image component for React.js
https://nh9x1.csb.app
MIT License
1.16k stars 36 forks source link

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

Closed DanielRuf closed 2 years ago

DanielRuf commented 2 years ago

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:

DanielRuf commented 2 years ago

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)