Bug 反馈：关于启用图片懒加载插件所引起的侧边栏定位失效的问题

[wifi504]

Bug 概述

启用图片懒加载插件会导致侧边栏定位失效

复现方式

• 在一个篇幅较长的文档加入若干张图片等资源引用，每张图片间隔距离稍大，防止懒加载一次性加载多张图片
• 启用图片懒加载插件
• 运行 dev ，进入浏览器访问
• 页面加载完成后，直接在侧边栏点击文章标题，或者使用搜索功能进行标题锚点跳转
• 发现锚点并不能成功跳转，而是大概率错位，因为锚点位置更新的是页面滚动高度，但此事件又会触发懒加载插件去加载图片资源，导致整体文档页面被撑高
• 如果你同时启用了vuepress core自带的平滑滚动插件，然后在浏览器开发工具启用流量限速模式访问（模拟线上环境），这个问题将会更加明显

关于解决方案

为了防止文档整体页面高度因为懒加载插件而动态变化，我的设想是给每个图片预先留出适合它的高来占位，这样没有加载的图片，在网页打开后也会占用高度，保证锚点链接不会错位

index.styl

.theme-default-content :not(a) > img
  width 100%
  box-shadow 2px 2px 8px rgba(0, 0, 0, 0.1)
  // 防止懒加载导致滚动高度失效，先占位
  aspect-ratio 3 / 2

这样的方式解决问题比较简单，但前提是网站里的图片的宽高比得为3:2，不然图片的比例又会出问题，所以不知道是否有办法可以实现在编译阶段给每篇文章的所有图片的size提取出来预存，然后给这些图片自动分配合适的宽高去占位，这样配合懒加载插件就不会导致bug，希望鱼老哥能在模板中加入这项实现！

附： 在 lazy-load 插件的 Github 仓库里有一个建议，说 markdown 的图片最好是按照 ![title](path/to/image/test.jpg =300x200) 的方式来写，但经过我的测试，这样确实会让图片在正常情况下自动拥有一个高度，解决了上述 bug ，但是前提是这张图片能刚好在浏览器内显示，如果浏览器视窗较小，或者使用移动端去访问，就会导致这个图片被硬生生拉长，显然使用这个方式，它直接把图片高度是多少 px 写死了，但是图片宽度会随着浏览器视窗高度动态变化，引发问题