图片动态模糊加载的一种实现方式

[huhailong1121]

今天在想之前看到的一些网站图片加载从模糊到清晰的加载效果挺不错的，想着自己实现一下，由于不是专业前端，我能想到的方案是加载不同的分辨率知道加载原图，同时分辨率越低的给它设置 filter 效果越明显，分辨率越高 filter 属性的值越低，知道最后原图不使用 filter 属性，同时加载完最终原图后将前面加载的低分辨率图片隐藏掉，这样可以提高图片给用户加载加载快的感觉，避免白屏时间长，具体效果大家可以通过我的这边内容查看效果和代码实现：

https://www.huhailong.vip/article/1765564946873110530

同时有前端大佬的话，可以讲讲你们的实现方式。

[344457769]

你这样岂不是占用了带宽去加载模糊图片了？会拖慢清晰图片的加载速度吧。

[344457769]

将图片处理为交错/渐进式，再搭配模糊滤镜提升观感，是更加常用的方法。

https://jaycechant.info/2020/progressive-image-loading/
https://developer.mozilla.org/zh-CN/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Loading

[israinbow]

有时候这个从模糊到清晰, 是 ssr 的时候 bitmap 渲染方式导致的, 并不是专门做的.
想要用户体验和开发易度兼具的话, 可以参考 unsplash 加载图片的方式, 先切一个小分辨率图片, 对其做个巨大高斯模糊.

[huhailong1121]

@344457769 嗯嗯，这样确实有点浪费带宽了，只是响应快了而已。我去学习学习如何处理为渐进式的，或者像楼下的，我只渲染一张小分辨率的，给个大的模糊，然后边等待边把模糊慢慢降低，知道原图完全 onLoad ，这样就渲染一张低分辨率的。

[huhailong1121]

@israinbow 嗯嗯，这样可以，用模糊过度，等待原图完全加载完成