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?
Asked
Active
Viewed 1,566 times
0
-
https://github.com/dombrant/blurry-image-load refer this link – CodeBug Jun 25 '20 at 12:02
2 Answers
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
- 6,214
- 1
- 23
- 60
-
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
-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.
user42344
- 37
- 1
-
Answer section is not for commenting et cetera... If you don't have enough privilege just yet, it's better to not looking for troubles for your own good – Thor-x86_128 Aug 14 '23 at 14:11