VUE组件实现一个防抖动效果
问题
- 防抖动问题顾名思义，由于html加载最后才会加载图片,所以如果没有提前设置高度的话,就会出现窗口抖动,用户体验很不好.
- 如果固定死高度的话，又不能于宽等比例缩放
如果是vue里面出现这种问题要怎么解决
思路
- 给template加< div >套起来，然后绑定class=“wrape”
- 给wrape写百分比 让图片在文字出来前就能撑开一个空间（有浏览器兼容问题，所以待会介绍两种写法）
具体操作
- 先套个div
- 针对div的样式来写
注明：
这里宽和高是一个百分比的关系，但为什么不写width，因为这么写width传到了父级去了，所以要写一个padding-bottom去撑开
当然还有另外一种写法
这种写法就是有一个浏览器兼容问题
- 空白的一大片空间不好看，所以设一个background的颜色，灰色比较好看