xaoxuu / hexo-theme-stellar

内置文档系统的简约商务风Hexo主题,支持大量的标签组件和动态数据组件。
https://xaoxuu.com/wiki/stellar/
MIT License
1.36k stars 330 forks source link

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

Open seiki-yui opened 6 months ago

seiki-yui commented 6 months ago

检查清单

问题描述

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

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

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

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

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

希望作者能加入此功能!