页面加载抖动问题

在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. Go语言实现:【剑指offer】第一个只出现一次的字符位置

    该题目来源于牛客网<剑指offer>专题. 在一个字符串(0<=字符串长度<=10000,全部由字母组成)中找到第一个只出现一次的字符,并返回它的位置, 如果没有则返回 -1( ...

  2. python中调用函数时,参数顺序与参数赋值问题

    设置类和函数如下:class MM(): def ff(self,url(1),method(2),data=None(3),cookie=None(4)): if method.lower()==& ...

  3. win10CPU版TensorFlow安装详细流程(踩N个坑之后的总结)

    版本说明: 多次实验后,python3.5+TensorFlow1.2+numpy1.16.4比较成功,不会报奇奇怪怪的错.(安装流程中会说到,不需要提前下载) 准备工作: 找到电脑:C:\Users ...

  4. 使用FIO工具测试块存储性能

    Linux实例和Windows实例都推荐使用FIO工具测试块存储性能.   说明 您也可以使用其他工具测试块存储性能,但不同工具测试出来的硬盘基准性能会有差异,如dd.sysbench.iometer ...

  5. R语言入门:向量索引

    这节的内容是建立在之前我们对R语言最基本向量赋值的基础之上的,笔者本人学完R当中向量的索引感觉异常舒适,因为这个比Python的索引爽多了,是什么值开始索引就从哪里开始索引,到哪里结束就在哪里结束,而 ...

  6. ES6 - 基础学习(5): 数值扩展

    二进制和八进制数值表示法 ES6提供了二进制和八进制数值的新写法,分别前缀 0b(或0B). 0o(或0O)然后跟上二进制.八进制值即可. 二进制(Binary)表示法新写法:前缀 0b 或 0B. ...

  7. kubernetes监控

    总体设计思想 总体设计架构图Kubernetes monitoring architecture 设计介绍 监控分成两个部分 核心指标流程 包括的组件有 kubelet.resource estima ...

  8. gradle与android studio 关系及gradle配置

    前言 我们一般开发android 使用android studio ,android studio 安装的时候,会帮我们做两件事,配置好自己的jdk. 实际上,使用的其实不是我们在path中配置的jd ...

  9. css选择器四大类:基本、组合、属性、伪类

    什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器 基本选择器又分为:*通配符.标 ...

  10. 回炉重造之重读Windows核心编程-006-线程

    线程也是有两部分组成的: 线程的内核对象,操作系统用来管理线程和统计线程信息的地方. 线程堆栈,用于维护现场在执行代码的时候用到的所有函数参数和局部变量. 进程是线程的容器,如果进程中有一个以上的线程 ...