2007-09-06

和小胖儿一起向<img>说再见.

废话不说,直入主题.
我的观点很简单, 当你使用<img>标签时,如果满足以下条件,那么请你不要再使用它了:
1 图片内容或路径不是动态生成的.
2 图片的作用类似图标,给用户操作提示
3 图片的作用只是起到装饰作用(做页面修饰)

不用IMG 那么用什么呢?
用span 或 div + CSS (background-image),然后把css全部提取到css文件中.

为什么这么做呢?

答案很简单,让你的jsp页面,jspTag(如果你的tag代码中输出<img>的话)和图片资源彻底的解藕.
最终目的是要达到: 图片的路径的变化,只会引起css文件内容的变化.
而对jsp java jsptag代码毫无影响.

CSS是用来决定页面的样式 和 美观与否的关键,
而图片从某种程度上来讲(尤其是满足文章开头所列三点的图片) 也决定着页面的样式 和 美观与否.
显然他们应当是一类.这也是为什么CSS文件中对URL的使用采用的是"相对与CSS文件"而不是"相对于引用CSS文件的文件"(很久以前是后者这样的).

总之,希望大家能够尽可能的用我说的方式,渐渐放弃对IMG的依赖.
如果你在做一个支持换肤的系统时,你就知道这有多重要了.
评论
fins 2008-07-12   回复
我印象中时不支持拉伸的
fyting 2008-07-12   回复
想请教一点，用background-image如何做到图片拉伸？就像windows的桌面有居中、平铺、拉伸
xugq035 2007-09-14   回复
EXT里的图标大量用到这样的css :-)
pi1ot 2007-09-10   回复
而对N多个相同的<img>则会请求N次，所以会节省带宽。

这肯定是不对的，一个页面中的重复img只请求一次是几乎所有浏览器默认的优化，不信可以装上各个浏览器的开发插件确认。
IE装iehttpheaders，FF装firebug，
差沙 2007-09-10   回复
hlxiong 写道
呵，我的意思是，对一个页面里出现的N多个相同的CSS，客户端只会向服务器请求一次，而对N多个相同的<img>则会请求N次，所以会节省带宽。


o , 原来是这个意思，好像是IE的问题。
hlxiong 2007-09-10   回复
呵，大家共同探讨，如果我的理解有问题，请指正。
hlxiong 2007-09-10   回复
呵，我的意思是，对一个页面里出现的N多个相同的CSS，客户端只会向服务器请求一次，而对N多个相同的<img>则会请求N次，所以会节省带宽。
差沙 2007-09-10   回复
hlxiong 写道
客户端对一个CSS只会请求一次，而每遇到一个<img>标签就会请求一次，所以如果把图片做到CSS里，重复出现时只要向服务器请求一次就OK了。

好像不是这样吧。。请求完css后，css里面的img还是都要请求一次的。
fins 2007-09-10   回复
hlxiong 写道
客户端对一个CSS只会请求一次，而每遇到一个<img>标签就会请求一次，所以如果把图片做到CSS里，重复出现时只要向服务器请求一次就OK了。

那css里引用的图片信息 是怎么传给客户端的呢??
你的意思是 图片文件的内容和css文件的内容一起传过去了 ??
hlxiong 2007-09-10   回复
客户端对一个CSS只会请求一次，而每遇到一个<img>标签就会请求一次，所以如果把图片做到CSS里，重复出现时只要向服务器请求一次就OK了。
例如，在一个数据列表里，可能经常需要出现删除、修改等按钮图片，我们以前都是直接用<img>标签，现在全换成用统一的CSS来实现，方便维护，也节省网络带宽，当然这点节约一般情况下可能感觉不出来，但在网络状况比较差的情况下就能看出效果了。
差沙 2007-09-09   回复
fins 写道
恩 楼上说的对 即使提到css里 对图片的请求次数还是不会少的
否则客户端无论如何也弄不到那些图片啊 呵呵

但是 这里面请求的时机有所不同了.
用img标签, 是浏览器在解析页面时发出请求, 在css里,是浏览器在解析css文件时发出请求.
但是这个细微的差别对开发人员来说几乎没有影响.
楼上两位可能误解人家说的请求一次的意思了。

当使用我说的方法的时候，很多图片坐在一起，然后用css指定显示位置，这样的话，很多图片由于做在了一个图片里面，多以请求一次（也就是下载一个图片）就OK了。

当然这里面的图片肯定是常用图片，几乎每个页面都用的，比如倒角，影子等图片。

EXT的图片就是这么处理的。
fins 2007-09-09   回复
恩 楼上说的对 即使提到css里 对图片的请求次数还是不会少的
否则客户端无论如何也弄不到那些图片啊 呵呵

但是 这里面请求的时机有所不同了.
用img标签, 是浏览器在解析页面时发出请求, 在css里,是浏览器在解析css文件时发出请求.
但是这个细微的差别对开发人员来说几乎没有影响.
pi1ot 2007-09-09   回复
对于一个图片来说，用CSS它只要向服务器请求一次就行了，而用img的话，每一个<img>标签就要请求一次 ??

sure?以我的经历貌似不是这样的。
hlxiong 2007-09-07   回复
楼上说的有道理，貌似网易邮箱、网盘页面上用的图片就是用的这种方法。

将图片设置到CSS背景属性上，还可以减少网络带宽占用，对于一个图片来说，用CSS它只要向服务器请求一次就行了，而用img的话，每一个<img>标签就要请求一次，这在一个图片在一个页面上多次出现的时候是很浪费带宽的。
我们现在就在有意识地用CSS来显示图片。
差沙 2007-09-06   回复
更有意思的用法是把小图片集合在一个大图片里面，然后css里面指定background-image的poistion，显示不同的图片。

也是老方法了，大家不防试试，这样的话，一个系统换一个皮肤更简单。
fins 2007-09-06   回复
当然 核心思想不是 为了不用img 而是为了让src和页面脱离关系

所以你可以还用 img 然后将 src指向 固定的blank图片
img的具体内容还用 css制定
fins 2007-09-06   回复
笨笨狗 写道
不是什么都适合用背景的，比如你的网站logo，按照语义来说，就应该是图片，用img。另外，img标签有alt属性，这对残疾人士，或者说屏幕阅读器来说是非常有帮助了，请问你用背景图片如何传递此类信息？毕竟浏览器不是唯一的用户。什么东西都要考虑周全，要是img如此鸡肋，w3c大概早就遗弃它了吧。


确实不是所有的img都是无用的.

至于你说的那个 img的alt的问题很好解决

如果确实需要alt属性,那么就不要用 span+ background-image 的方式来代替img

你可以使用 <input type="image" />来代替.

例如

<input type="image" class="iamImg" alt="辅助说明" src="blank.png"  disabled="disabled"/>


其中,blank.gif是一个固定的透明的图片.
样式如下
.iamImg {
background-image:url(./defaultskin/images/testimage.jpg);
border:none;
width:80px;
height:20px;
cursor: default;
}

笨笨狗可以试一试.

初看起来 <input type="image" class="iamImg" alt="辅助说明" src="blank.png"  disabled="disabled"/>
比
<img src="/webcontextpath/common/defaultskin/images/testimage.jpg" alt="辅助说明" class="iamImg"  />
麻烦,但实际上带来的好处也是同样明显的.

当然凡是都有利弊了.
fins 2007-09-06   回复
ouspec 写道
fins 写道
其实这不是什么新鲜的做法,我想这么做的人肯定早就有了,而且大大的有 :)


javaeye3.0的做法是如果和布局相关的img都尽量放到css中，和数据相关还是用Img标签。这样做的确有很多好处，不光是解耦，也使得整个的页面的结构更加简洁合理。


恩 数据相关的 如统计图表等确实应该还用img.
不过我想 像是客户级别那个图片同样可以用css吧 呵呵
笨笨狗 2007-09-06   回复
不是什么都适合用背景的，比如你的网站logo，按照语义来说，就应该是图片，用img。另外，img标签有alt属性，这对残疾人士，或者说屏幕阅读器来说是非常有帮助了，请问你用背景图片如何传递此类信息？毕竟浏览器不是唯一的用户。什么东西都要考虑周全，要是img如此鸡肋，w3c大概早就遗弃它了吧。
ouspec 2007-09-06   回复
fins 写道
其实这不是什么新鲜的做法,我想这么做的人肯定早就有了,而且大大的有 :)


javaeye3.0的做法是如果和布局相关的img都尽量放到css中，和数据相关还是用Img标签。这样做的确有很多好处，不光是解耦，也使得整个的页面的结构更加简洁合理。
发表评论

该博客是同时发布到论坛的，无法评论在论坛已被锁定的帖子

fins
  • 浏览: 836590 次
  • 性别: Icon_minigender_1
  • 来自: 小胖儿的大城
  • 详细资料
搜索本博客
我的相册
4fe31d38-da42-30d3-ae31-a626284c975b-thumb
闹闹的留言
共 78 张
其他分类
存档
最新评论