CSS属性

visibility

所有主流浏览器都支持 visibility 属性
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持 “inherit” 和 “collapse” 属性值。

定义和用法

visibility 属性规定元素是否可见,所有浏览器兼容的值:visible(默认值,元素是可见的)、hidden(元素是不可见的)
提示:即使不可见的元素也会占据页面上的空间。请使用 “display” 属性来创建不占据页面空间的不可见元素。

有效用法

为了提高加载性能,常采用异步加载图片。(《CSS世界》P49-50)为了体验良好,往往会使用一张透明的图片占位,而这张占位图片也是多余的资源,直接使用以下方式:

1
<img>

配合CSS代码来实现同样的效果

1
2
3
4
5
6
7
8
9
10
img { visibility:hidden; }
img[src] { visibility: visible;}
/*
*兼容Forefox 内联元素-替换元素
*/
img{
width:200px;
height:150px;
display:inline-block;
}

注意,这里的<img>是直接没有src属性,不是src="",当图片的src属性缺省时,图片不会有任何请求。