几个功能增强建议

[appotry]

1. 支持div 的style background

在html文件中的

<div class="ajustedBackground"  style="background-image: url('loading-image');"><div>

这个插件实现了这个功能，hexo-filter-lqip，可以参考实现

2. 支持在css文件中的图片

div.waline {
    background: url("/medias_webp/loading.svg") 100% 100% no-repeat; /* Placeholder image */
}

3 支持获取占位图片的宽高

没有宽高，可用，但存在一些问题

• 没有宽高，一些性能测试工具会报错
• lazyload显示前后文章宽高会跳动

3.1 本地图片

直接获取图片宽高

3.2 网络图片

方法1 可以缓存到本地目录来获取宽高

这个插件实现了这个功能 hexo-native-lazy-load

方法2 链接路径映射到目录路径

如果是github仓库的图片 本地clone仓库目录和网页链接之间做一个映射，那么就不需要再次下载图片来获取宽高了

[Troy-Yang]

Good suggestion! 抽空看看

[appotry]

iframe的lazyload

vanilla-lazyload 这个库支持

[Troy-Yang]

css 和 html 背景图片的问题已经支持上了，用法是需要加上 bg-lazy 属性：

<div bg-lazy style="background-image: url('https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-600,h-400'); height: 400px; max-width: 600px;"></div>

对于#3 的LQIP， 其实组件已经支持，只是没有那么自动化的支持，原因有几个：

• 要想获取占位符宽高，要么就是hexo 编译的时候获取原始图片大小，要么就是编写markdown的时候使用img 并指定宽高，几种方式都对用户使用或者主题开发有要求，我期望这个插件比较轻量级，门槛低
• 可使用imagekit 工具之类的预先生成模糊图然后使用下面的方式

<img src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300,bl-30,q-50" data-original="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />

至于iframe， 不准备支持，不想太过复杂化

[appotry]

<div bg-lazy style="background-image: url('https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-600,h-400'); height: 400px; max-width: 600px;"></div>

这种生成出来的效果没有占位图？ 测试看着是空白背景，然后显示出来图片

[appotry]

@Troy-Yang 这里加一个占位图比较好 https://github.com/Troy-Yang/hexo-lazyload-image/blob/729a64975800e29f7408ffa7687895bc6c72b33f/lib/addscripts.js#L12

[Troy-Yang]

占位图没办法固定大小，如果你们确实需要，可考虑全局css 覆盖

[bg-lazy] {
  width: 300px;
  height: 600px;
}