0

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?

Kartikey
  • 3,658
  • 4
  • 13
  • 35

1 Answers1

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?

MauriceNino
  • 5,616
  • 1
  • 18
  • 49
  • I would say not to hide the small image, but to replace it in the same img tag. – Dejan.S Jun 25 '20 at 12:09
  • If you want to have fancy animations or something, I would do it in separate divs/imgs and then remove the small one from the DOM once the animation is done. But yeah definitely something to think about. @Dejan.S – MauriceNino Jun 25 '20 at 12:11