简体繁体 English

如何在加载时使图像模糊，并在完全加载后使其清晰？

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

原文 2020-06-25 11:57:47 3 2 javascript/ html/ jquery/ css

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.我正在制作一个项目，当有人打开它时，图像应该给他们一个模糊的预览，并在完全加载后向用户显示 iamge。 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.例如 - 在 Instagram 上，当我们打开应用程序时，它会向我们显示模糊的图像，而在完全加载后，它会向我们显示清晰的图像。 How to Implement that same feature using javascript or jquery?如何使用 javascript 或 jquery 实现相同的功能？

2 个解决方案

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() .然后您可以加载较小的图像并使用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?为了获得有关如何检查的一些想法，我发现了这个 stackoverflow 线程：如何创建 JavaScript 回调以了解何时加载图像？

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.这对我来说看起来不对，我很困惑。