记忆盒子

把记忆装进灰色的盒子,封装起来,那年那月,重新拾起。

首页搜索目录
search
当前主题: 互联网络

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

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

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

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

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

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

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

      标记是

<div class="embed-container ratio-16-9">
      <img src="imgage.jpg"/>
</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))

 

加入本站QQ群(312716741),交流分享网站建设、优化、SEO技术。。。

 

上一篇: 64位win2003/win2008系统IIS6.0/7.5配置PHP的方法
下一篇: 解决zblog后台速度慢的问题

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客                   QQ交流群(312716741)

  • 通过Google订阅本站 通过鲜果订阅本站 通过抓虾订阅本站
  • 通过QQ邮箱订阅本站 通过Yahoo订阅本站 通过有道订阅本站

Search

最新评论及回复

最近留言

网站分类

Powered By Z-Blog 1.8 Walle Build 91204 Designed by Han'space

Copyright @2009 All Rights Reserved. 粤ICP备09073737号

Powered By Z-Blog 1.8 Walle Build 91204
Copyright @2009 All Rights Reserved.