Use blurhash to quickly load images
joelwass opened this issue · comments
Use blurhash to quickly load images from DB while larger images are downloaded
https://github.com/woltapp/blurhash
this will need backend support
I think we can blurhash all our assets and then put the blurhashes inline during loading. This avoids backend work and also keeps the frontend UI and backend decoupled (as they currently are).
This might not be feasible for TF. Having a loader display (the blurhash) instead of the image requires events on image load, but all but a couple of the images in TF are set via css background-url.
Sounds interesting. May I take this issue?
What I'm planning to do is, replace all the img element into canvas element.
Using this library for encoding / decoding - https://github.com/woltapp/blurhash/tree/master/TypeScript
Then, load the actual image using fetch() or similar & re-draw the canvas with actual image.