img标签的问题

摘要

对于img标签,没有几个web前端人员会陌生。因为现在的网页中,文字和图片基本是必备元素。或许是因为这个原因,很多前端人员都没有认真去关注过图片身上所具有的一些特性。

对于img标签,没有几个web前端人员会陌生。因为现在的网页中,文字和图片基本是必备元素。或许是因为这个原因,很多前端人员都没有认真去关注过图片身上所具有的一些特性。

很多时候,我们因为不了解事物的本质而陷于一种迷茫的境地。今天笔者就带大家重新认识一下“图片”。

图片做为一种媒体资源,src属性为其加载资源。在一个网页中,如果图片很多并且没做过任何优化,那么在网页请求的过程中每一张图片都会发送一个HTTP请求。在网站的请求过程中,每增加一个HTTP请求,对于服务器来说都是一种压力。所以,做为一名合格的前端开发人员,我们应该尽可能的避免这种情况的发生。

常见的解决方案有两种,一种是将图片转成base64,一种是采用按需加载的方式。这两种方案各有利弊,使用的过程中根据自己的实际情况选择即可。

img标签在W3C规范中属于行内块元素,但是有别于其它的行内块元素。如果你和img标签打过交到的话,肯定知道不做任何处理的img标签在浏览器中显示时底部会有几像素的空隙,很多人把这个问题归结为浏览器的bug。当然了,对于这种问题前人们已经有了很好的解决方案。一种是给img标签添加display: block;转换成“块级”元素,一种是给img标签添加vertical-align: top;。笔者常用vertical-align: top;这种解决方式,赋值为middle,bottom也是可以的。

很多时候,我们在翻看别人代码的过程中可能注意到别人的img标签上通过都会写上width和height这两个属性。起初笔者也没太在意这个问题,直到有一次笔者发现自己写的代码在图片加载的过程中有抖动才注意到。

探究了一番,原来是因为笔者网页中的父级元素是靠图片撑开的,相信很多人平时也是这样做的。在一些浏览器中,如果图片没有指定宽高,浏览器在渲染过程中是无法提前预知图片大小的,也就无法提前撑开父级元素,这就导致页面加载过程中会有跳动现象产生(页面重绘)。

为img标签上加width和heigth是为了提前告诉浏览器图片占位大小,这样有些浏览器在渲染过程中就不会出现跳动现象了。这种做法并不能保证所有浏览器都能表现一致,因此便有了第二种完美的解决方案,就是利用定位,通过设置父级的宽高,然后再把图片定位上去。这样就保证了所为浏览器效果的一致。

shaw

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: