我正在做一个项目,当有人打开它,所以图像应该给他们一个模糊的预览,并在其完全加载后,然后向用户显示iamge。 例如,在Instagram上,当我们打开应用程序时,它会向我们显示模糊的图像,而在它完全加载后,它会向我们显示清晰的图像。 如何使用javascript或jQuery实现相同的特性?
您需要在数据库中拥有一个质量非常低的映像版本(或者如果您将其直接嵌入->到您的资产中)。 然后可以加载较小的图像,并使用CSS blur()对其进行模糊处理。
当加载完全大小的图像时,您可以隐藏小图像。 为了了解如何检查这一点,我找到了这个stackoverflow线程:如何创建一个JavaScript回调来知道图像何时被加载?