Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

希望为懒加载图片加入占位,避免高度跳变 #454

Open
2 of 3 tasks
seiki-yui opened this issue May 1, 2024 · 0 comments
Open
2 of 3 tasks

希望为懒加载图片加入占位,避免高度跳变 #454

seiki-yui opened this issue May 1, 2024 · 0 comments

Comments

@seiki-yui
Copy link

检查清单

  • 已经阅读过 官方文档 相关内容,并尝试进行搜索。
  • 尝试过在本地测试运行官方 demo 源码。
  • 尝试过在 Codespace 中测试运行官方 demo 源码。

问题描述

图片懒加载易出现高度跳变/布局抖动,对于多图博客的体验稍稍有点不友好
所以希望Stellar能加入类似的功能,如占位图片等,在滚动页面时来避免这种高度跳变/布局抖动…

实现的思路大概是:嗅探图片对应的图片,读取宽高并硬编码写到dom里。

由于不同用户插入图片的方式不尽相同,所以可能需要分多种情况读取图片:

  1. 使用网络图片,需要远程获取图片的宽高。
    为hexo博客添加自适应图片占位图(配合lazyload):volantis主题动态获取远程图片的宽高比
  2. 使用绝对路径本地引用,像是一篇使用了多处本地图片的文章
    减小图片加载布局抖动和在 Hexo 中的最佳实践
  3. 使用文章资源文件夹,每篇文章都有自己单独的文件夹
    在Hexo博客中插入图片的各种方式
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true

在文章里看到 ”srcset“ 相关的内容,应该能作为实现方案之一;
由于并不熟悉与Hexo代码打交道,之后基本没有清晰的思路,于是在此请求。

希望作者能加入此功能!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant