如何固定懒加载图片占位符

Troy-Yang / hexo-lazyload-image

lazyload image plugin for Hexo.

MIT License

82 stars 10 forks source link

Closed SnowMeteors closed 3 years ago

SnowMeteors commented 3 years ago

从第一张图片可以看出，图片占位符的大小是不一样的如图所示懒加载图片占位大小不一样而我希望占位符大小是固定的如下图所示，肉眼基本看不出这两个占位符大小的区别占位符基本大小一样请问如何固定所有图片占位符的大小比如100px100px 或者 200px200px之类的

Troy-Yang commented 3 years ago

首先loading 图片大小不一样的原因是站位的大小不一样，loading图片只是负责去填充。

可以试试自定义loading图片，然后 css 控制loading 大小 img[src="/loading.gif"] { width: 200px; hight: 200px }

SnowMeteors commented 3 years ago

首先loading 图片大小不一样的原因是站位的大小不一样，loading图片只是负责去填充。

可以试试自定义loading图片，然后 css 控制loading 大小 img[src="/loading.gif"] { width: 200px; hight: 200px }

这样的话，岂不是我原始的图片也被固定成了width: 200px; hight: 200px ？

Troy-Yang commented 3 years ago

只有src路径满足条件才会啊，替换完了条件就不满足了

SnowMeteors commented 3 years ago

只有src路径满足条件才会啊，替换完了条件就不满足了

我大致懂你的意思了，但我具体实现代码是要修改懒加载插件里面的源代码吗，能否给个具体的步骤，谢谢

Troy-Yang commented 3 years ago

在你主题的.css 文件里加上 (src 里的路径就是你自定义图片的路径，一定要保证两个相等): `

img[src="./loading.gif"] { width: 100px; height: 100px; }