How to make the image blurr while it is being loaded and after its fully loaded then make it sharp?

Question

I am making a Project in which when someone opens it so the images should give them a blurr preview and after its fully loaded then show the iamge to user. For example - On Instagram, when we open the app it shows us the blurred image and after its loaded fully it shows us the clear image. How to Implement that same feature using javascript or jquery?

Answer 1

You need to have a really low quality version of the image in your database (or if you embed it directly -> in your assets). Then you can load the smaller image and blur it using CSS blur() .

When the fully sized image is loaded, you can hide the small image. To get some ideas on how to check for that, I found this stackoverflow thread: How to create a JavaScript callback for knowing when an image is loaded?

Answer 2

How does the above answer have a Green Tick but the link that is shared so not have. This does not look right to me and I am confused.