CSS

图片加载慢导致元素空白

Posted by luoxiao on 2016-05-31

本文主要介绍在处理图片加载的时候遇到的一些问题。

在做大众点评的一个运营活动的时候遇到了一个图片加载的问题,因为图片是按照宽高百分比进行布局的,当网速比较慢的时候图片还没有加载出来,导致div元素没有被撑起了,使得文字等内容全部都被堆积在一起。

解决方法如下(当图片比例不会发生变化的时候):
1.设置图片宽度度为100%,自适应,算出宽高的百分比比例,例如图片比例为1:2
2.设置元素height:0px,relative相对定位
3.设置元素padding-bottom为高度的百分比(1:2)50%
4.其他内部元素用absolute定位

例如:

1
2
3
4
5
.dish .head {
position: relative;
padding-bottom: 50%;
height: 0;
}

这里还引出一个概念就是:margin和padding如果使用百分比进行布局的话,值是参照于父元素盒子的宽度进行计算。在w3c的规范中也是这样描述的: margin 的百分比值参照其包含块的宽度进行计算,同样的padding如果设置成百分数的话,其盒子模型和margin是一样的。

为什么要选择宽度做参照而不是高度呢?

这其实更多的要从CSS设计意图上去想,因为CSS的基础需求是排版,而通常我们所见的横排文字,其水平宽度一定(仔细回想一下,如果没有显式的定义宽度 或者强制一行显示,都会遇到边界换行,而不是水平延展),垂直方向可以无限延展。但当书写模式为纵向时,其参照就变成了高度而不再是宽度了。