响应式图片-怎样防止网页重排

作者:Kaka 时间:2014-12-8 10:38:46 浏览: 评论:6

在响应式网页设计（指可以自动识别屏幕宽度、并做出相应调整的网页设计）中，我们不用指定图片宽度和高度，而是使它们更有弹性：img{max-width:100％;}。因此，为了获得响应式图像提供的灵活性，我们需要牺牲一些渲染速度。

我相信大家已经经历过网络不好时的网页重排现象：加载一个页面读取，在向下滚动时，内容看似“上下跳动”，这就是网页重排。这是因为浏览器不知道图像的尺寸，不能保留空间为它。因此，当图像被加载，它必须将其插入到页面中，并把它下面和右面的东西移走，做一个重排。

解决此问题的一个先决条件是，要知道图片的高宽。下面解释这个技术。

不再是img{max-width:100%}

这是不使用响应式网页设计最根本的东西之一，相反，将使用的是响应式嵌入技术。意思是，我们在图片周围设置封套一个DIV，使用“padding-bottom”方法，使DIV保持一定的高宽。

标记是

这个CSS，添加一些我们在代码中能使用的长宽比：

.embed-container {
    position: relative;
    height: 0;
    overflow: hidden;
    background-color:black;
}

.ratio-16-9{
    padding-bottom:56.25%; /* 9/16*100 */
}

.ratio-4-3{
    padding-bottom:75%; /* 3/4*100 */
}

.ratio-1-1{
    padding-bottom:100%; /* ... */
}

然后，要做的事情只是设置图片的位置：绝对位置和靠上、靠左对齐。

.embed-container img{
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
}

你也可以使用预处理计算填充：

@ratio-16-9: (9%/16%*100%);
@ratio-4-3: (3%/4%*100%);
@ratio-1-1: (100%);

.ratio-16-9{padding-bottom: @ratio-16-9;}
.ratio-4-3{padding-bottom: @ratio-4-3;}
.ratio-1-1{padding-bottom: @ratio-1-1;}

max-width是怎样的？

由于div的高度是居于上一级div的宽度来计算的，我们需要设置上一级div的max-width来限制图片大小，这可能是个缺点，但由于这整个技术是居于你所知道的图片，应该是可能的。

结果-演示

如果我们使用这个技术，模拟使用一个慢连接，就会发现，我们现在有为图片保留空间（使用黑色背景，然后向下滚动，以体验重排），结果是演示没有重排！

在这个技术里，我们为响应内容保留空间，而不需要指定宽高的像素，也不使用Javascript来计算尺寸。

相关知识

减少网页重排的几个建议

如果想设定元素的样式，通过改变元素的 class 名 (尽可能在 DOM 树的最里层)（Change classes on the element you wish to style (as low in the dom tree as possible)）
避免设置多项内联样式（Avoid setting multiple inline styles）
应用元素的动画，使用 position 属性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
权衡平滑和速度（Trade smoothness for speed）
避免使用 table 布局（Avoid tables for layout）
避免使用CSS的 JavaScript 表达式 (仅 IE 浏览器)（Avoid JavaScript expressions in the CSS (IE only)）