页面加载抖动问题

在web开发中，经常会遇到这样一个问题，比如一个宽度百分百，高度自适应的图片，在网速慢的情况下加载过程中会出现抖动的问题（未加载图片前容器的高度为0，图片加载完成后下面的内容会被挤下去）。

这种问题如果是图片有固定高度，就不会出现加载抖动。但一般情况下，为了使图片不被拉伸，高度一般设为自适应，那么为了防止加载抖动，我们需要给图片提前占个位，这里使用的是css的padding-bottom百分比进行占位。

示例代码如下

.img-box{

  overflow: hidden;

  width: 100%;

  height: 0;

  padding-bottom: 50%;

}

padding-bottom实际上是提前占位了，这个容器的高度始终是0，高度为0还之所以能够显示内容是因为内容溢出在了padding-bottom上，这里的50%是图片的高宽比例，切记是相对于父元素宽度的50%（即.img-box的上一级），不是相对于自己的width，详情请看下面的例子。

这里写了一个小案例

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title>padding-bottom</title>

  <style>

    .content{

      width: 400px;

      height: 400px;

      margin: 100px auto;

      background-color: aquamarine;

    }

    .box1{

      width: 100%;  /* 400px 相对于content的width */

      height: 0;

      padding-bottom: 50%;  /* 200px 相对于content的width */

      background-color: red;

    }

    .box2{

      width: 25%; /* 100px 相对于box1的width */

      height: 0;

      padding-bottom: 25%;  /* 100px 相对于box1的width */

      background-color: yellow;

    }

  </style>

</head>

<body>

  <div class="content">

    <div class="box1">

      <div class="box2"></div>

    </div>

  </div>

</body>

</html>

如图所示

这种情况下box2中如果有图片宽高比为一比一时（根据padding的百分比），加载过程中就不会出现抖动的情况，同理box1也是如此。

当然解决抖动还有其他方法，比如何以用vw（兼容性不太好，这里就不列举了），还有比如在微信小程序中rpx，如果图片的设计大小宽高为750×300时，就可以直接写成height: 300rpx。

css使用padding-bottom百分比进行提前占位，防止抖动的更多相关文章

  1. CSS笔记——padding，margin为百分比计算时的参照对象

    div的padding为百分比的两种情况 padding-top,padding-bottom,margin-top,margin-bottom是百分比时是按照当前元素的父级元素的宽度来计算的 1. ...

  2. 利用padding-top/padding-bottom百分比，进行占位和高度自适应

    在css里面,padding-top,padding-bottom,margin-top,margin-bottom取值为百分比的时候,参照的是父元素的宽度. 比如:父元素宽度是100px, 子元素p ...

  3. 移动端网页巧用 margin和padding 的百分比实现自适应

    一个基础却又容易混淆的css知识点 本文依赖于一个基础却又容易混淆的css知识点:当margin/padding取形式为百分比的值时,无论是left/right,还是top/bottom,都是以父元素 ...

  4. css定位中的百分比

    ----转载自自己在牛人部落中的相关文章--- 在前端css定位中经常面对的一个问题是,百分比定位究竟是针对于谁定位? 一.margin,padding的百分比 首先从css的设计意图说起,在浏览器默 ...

  5. 【转】图解CSS的padding,margin,border属性(详细介绍及举例说明)

    W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层.盒模型主要定义四个区域:内容(content).边框距(p ...

  6. margin、padding单位百分比

    年前做了一个测试题 https://www.wenjuan.com/s/VjaEva/,里面有一道题目涉及到了margin和padding单位为百分比的情况.写出来记录一下以防止自己忘记. <! ...

  7. [转]图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  8. 图解CSS的padding,margin,border属性(详细介绍及举例说明)

    图解CSS的padding,margin,border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...

  9. CSS中padding和margin以及用法

    CSS中padding与margin 1.padding:内边距,表示控件内容相对于边缘的距离. 2.margin:外边距,表示控件边缘相对于父空间的边缘. 参考:http://www.studyof ...

随机推荐

  1. OSPF配置实验(一)

    单区域OSPF 命令: R1(config)#router ospf 1        //启动OSPF进程 R1(config-router)#router-id 1.1.1.1        // ...

  2. Vscode开发Java环境搭建

    VSCode 开发 JAVA 微软为 Java 开发者推出了一个 Visual Studio Code 的安装程序.Visual Studio Code 中目前提供了许多 Java 扩展. 该软件包可 ...

  3. 使用requests、re、BeautifulSoup、线程池爬取携程酒店信息并保存到Excel中

    import requests import json import re import csv import threadpool import time, random from bs4 impo ...

  4. #614 C. NEKO's Maze Game[简易DFS,0|1转换]

    起初一直看不懂题的意思,最后看了大佬的视频讲解才明白了题的意思. 题意:每次询问重复的时候抵消上一次操作  如果是奇数次的操作则视为障碍阻挡前进 收获:0和1的转换技巧,简单搜索和巧定义全局变量,没必 ...

  5. android手机遍历安装应用

    /** * 遍历程序列表,判断是否安装安全支付服务 * * @return */ public boolean isMobile_spExist() { PackageManager manager ...

  6. cache和内存屏障

    1 cache简介 1.1 cache缓存映射规则 tag查看cache是否匹配,set index |tag |set index |block offset ||20-bit |7-bit |5b ...

  7. [Wpf学习] 1.传说中的Main

    原来的C#程序都有Main的,现在用vs新建一个Wpf项目,启动似乎变成App.xmal,前期项目中为了获取启动参数,很是折腾了一番: 1.先是修改App.xaml,添加StartUp事件 <A ...

  8. 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题

    摘要 在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面.常见的的URL有两种显示方式,一种是hashHistory的形式,形 ...

  9. Android中Chronometer计时器的简单使用

    场景 实现效果如下 注: 博客: https://blog.csdn.net/badao_liumang_qizhi 关注公众号 霸道的程序猿 获取编程相关电子书.教程推送与免费下载. 实现 将布局改 ...

  10. TNS-01189 During Listener Monitoring Using Enterprise Manager

    oracle 12.2 RAC监听日志报错:15-JAN-2020 22:27:53 * (CONNECT_DATA=(COMMAND=VERSION)) * version * 1189TNS-01 ...