jerryc127 / hexo-theme-butterfly

🦋 A Hexo Theme: Butterfly
https://butterfly.js.org
Apache License 2.0
6.8k stars 1.24k forks source link

[Feature]: blur lazyload样式应用于background-image #1492

Closed XenWayne closed 1 month ago

XenWayne commented 1 month ago

想要的功能 | What feature do you want?

lazyload:
  enable: true
  field: site # site/post
  placeholder:
  blur: true

默认的blur加载十分优秀,看了lazyload的相关处理,似乎只处理了<img>标签的正则,是否有办法将这种样式也应用于background-image: url()这样的场景?比如首页top_img,大图片首次加载会有类似逐行扫描的加载过程。

jerryc127 commented 1 month ago

img 的模糊效果只是 '效果’ 而已, 让图片出现不那么突兀

正常的做法是 准备2张相同照片,一张正常的分辨率,一张 只有几kb, 压缩过的照片 先加载压缩的照片,等正常的照片下载完再替代 但是我想用这主题的人应该也不会这样做,毕竟所有的图片都要准备2张

background-image 不用模糊效果 是因为 background-image 还没加载完,会先显示背景底色,背景底色就是主题的默认色 默认色加模糊效果不明显 达不到 img 的那个效果

所以把 background-image 体积尽可能的小, 还有使用 webp 这些格式的照片 会更好点