处理页面加载图片显示前后抖动问题

Posted mb60aa6722a0e94

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了处理页面加载图片显示前后抖动问题相关的知识,希望对你有一定的参考价值。


html

<div class="banner">
<img
class="banner__img"
src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
</div>

css

.banner 
height: 0;
overflow: hidden;
padding-bottom: 25.4%; // 计算图片的长宽比 这里就表示图片的高

.banner__img
width: 100%;

以上是关于处理页面加载图片显示前后抖动问题的主要内容,如果未能解决你的问题,请参考以下文章

页面加载后页面元素抖动闪烁的问题

处理点击tab标签时Echarts图片显示不全的问题

手机陀螺仪的应用

懒加载和预加载

图片懒加载

图片加载防止窗口抖动,又可以等比例缩放