巧解加载图片未加载完成时的高度塌陷问题

问题

一般上我会在 img 元素外层包一层 div 通过设置外层元素的大小,然后设置 imgwidth100% 来控制图片的实际大小,所以就有了一下这种结构

<div class="img-wrap">  
  <img src="http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png" alt="">
</div>  

但是由于首次进入时,这个图片的高度浏览是获取不到的,所以也就撑不满外层的 div 从而导致下面的元素顶上来,当浏览器加载完图片时,外层的 div 就会被撑满,下面的元素就会被挤下去,导致首次进入页面是会闪屏。

就如同下面的效果

底部的黑色块用来测试图片的高度是否有改变,如果位置一直不变那么说明图片外层 div 高度未变化。

解决

首先设计师给的图片我们是能够知道图片的宽高比的,当然图片的具体尺寸我们是知道的,但是当外层的 div 设置的宽度为一个百分比时(比如说要在手机端整行显示),知道具体的宽高貌似没多大的用途。

解决思路一: 给外层 div 设置固定的高度,图片当背景图使用

.img-wrap{
    background:url('http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png');
    background-size:cover;
}

由于设置的固定的高度,那么总有一部分情况下,图片是显示不完全的,所以这中解决方式解决的问题有限,仅仅在不需要全图显示的情况下使用。

解决思路二: 将外层的 div 高度设置成和 img 高度一致 那好问题来了:怎么才能够设置一直呢? 先将我们知道的捋一捋:

  1. 图片是占满外层 div
  2. 图片的宽高比

那是不是可以这么说:只要外层的div能够按照它自身的高度来设置宽度,那就解决了,对吧?

不需要使用 js ,在 css 中我们就能够做到: padding

如果 padding 的值为百分比,那么它的值是按照当前元素的 宽度+margin 来的

由于是按照 宽度+margin 来设置百分比,必须保证外层 div宽度+margin 为我们想要的数值,所以应该在外层 div 外再嵌套一层 div 设置宽度,来固定内层 div 的大小。

所以就有了一下这种结构,最外层 div 确保内层 div 的百分比基准正确,内层 div 利用 padding-top 来填充高度,同时将图片定位到内层 div 的顶部,我用的图片的宽高比为 1920/1080 ,所以需要设置 padding-top 的值为: 1080/1920 = 56.25%

<div class="width-wrap">  
  <div class="img-wrap">
    <img src="http://7xse2z.com1.z0.glb.clouddn.com/wallhaven-385041.png" alt="">
  </div>
</div>

<div class="box"></div>  

具体的代码: