display:none和visibility:hidden的区别！

在网站上看到：“
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visibility:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。
”这样的解释。
但是我觉得并不够，所以就想了一下关于他的一个加载问题。
有属性display:none;的结构在加载页面时，是否会同时加载呢？或则是当他变成display:block;的时候才加载的呢？
有属性visibility:hidden; 的结构在加载页面时，是否会同时加载呢？或则是当他变成visibility:visible; 的时候才加载的呢？

个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

这些观点都是我的一个推测，本人并不知道如何去测试，也找不到这方法的资料，所以到此来跟大家讨论讨论。
还望各位大虾指点迷津。

[ 本帖最后由 kaka48265 于 2009-8-4 13:54 编辑 ]

作者: kaka48265 发布时间: 2009-08-04

这个问题，前些天我去参加一个面试的时候，面试官问过我。回来仔细研究了下，你的解释是完全正确的。

至于你的疑虑。我的答案是（仅供参考）：不管是用了什么css样式，html里的元素都会在打开网页后一并加载。这个说到底也是css的基本功能。就是结构与表现的分离。我们的html是结构，结构会全部加载，但是在表现的时候（也就是页面的外观），由css来控制你看的到还是看不到而已。

所以你说的：“display:none和visible:hidden都是把网页上某个元素隐藏起来的功能，但两者有所区别，经过亲自实验，我发现使用 visible:hidden属性会使对象不可见，但该对象在网页所占的空间没有改变（看不见但摸得到），等于留出了一块空白区域，而 display:none属性会使这个对象彻底消失（看不见也摸不到）。”

就这样理解即可。

作者: mobaihuo 发布时间: 2009-08-04

非常感谢你的解释！
我的问题你已经很好的跟我解释了。
不过不知道我们是否能扩展一下。
能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？
（我们暂且不说他合不合理。）

[ 本帖最后由 kaka48265 于 2009-8-4 12:49 编辑 ]

作者: kaka48265 发布时间: 2009-08-04

复制内容到剪贴板

代码:

visibility

作者: birdstudio 发布时间: 2009-08-04

引用:

原帖由 birdstudio 于 2009-8-4 12:53 发表
visibility

亲爱的版主，麻烦您稍稍的解释一下。
我真不懂。
我上面好像有说到visibility 这个属性。

作者: kaka48265 发布时间: 2009-08-04

display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。

作者: 豆豆猫发布时间: 2009-08-04

你自己检查一下你的拼写。

作者: birdstudio 发布时间: 2009-08-04

6#
谢谢你的解释。
不过并非我们讨论的范围了！

7#
谢谢提醒，已经修改。

希望大家踊跃参与，提出宝贵意见。
如何实现控制它显示的时候它才加载进页面的方法。

作者: kaka48265 发布时间: 2009-08-04

引用:

原帖由 kaka48265 于 2009-8-4 13:58 发表
如何实现控制它显示的时候它才加载进页面的方法。

传说中的 Ajax ？

作者: birdstudio 发布时间: 2009-08-04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #test { display:none;} </style> </head> <body> <a href="#" onclick="javascript:document.getElementById('test').style.display='block'">test</a> <div id="test"><iframe src="http://www.qq.com" frameborder="0" width="100%" height="1000"></iframe> <br /><br /><br /><br /><br /> </div> </body> </html>
提示：您可以先修改部分代码再运行

引用：
个人的看法是：
display:;当他的值变成block 的时候，它所在的结构才会被加载进来。
而visibility就会在加载页面的同时就已经把它加载进来了，因为他的值为hidden的时候，它所占的空间还在。

你这个说法是不对的，应该都是在页面载入的时候就加载了
可以通过隐藏IFRAME来测试

页面载入的时候请注意看你浏览器的状态栏。

作者: 47tz 发布时间: 2009-08-04

上楼的对，display:none和visibility:hidden都在页面加载时加载了。
你说visibility:hidden看不见但摸得到？我怎么摸不到呢？用ie和ns都摸不到，只是占用了位置。

作者: pjypjw 发布时间: 2009-08-04

你们说的加载是什么意思？如果指浏览器加载网络资源的话，那应该是display:block的时候才会被加载
大家可以做一个实验：下面这段代码，先在 #test { display:none;} 的情况下运行，然后断开网络，把display:none改成display:block 运行，结果是图片并没有被显示。在连接上网络，刷新，图片就显示了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #test { display:none;border:1px #ccc solid;} </style> </head> <body> <div id=test> <img src="http://i1.hoopchina.com/user/999/3164999/12483461061.jpg" title="春哥纯爷们" alt="" /> </div> </body> </html>
提示：您可以先修改部分代码再运行

作者: kapiter 发布时间: 2009-08-05

这位童鞋的理解直接脱离了网络，是不是说当你打开某个网站之后，然后断开网络刷新一下，你就可以直接读取本地缓存上的信息？

显然这是不成立的。

“下面这段代码，先在 #test { display:none;} 的情况下运行（会加载隐藏的内容），然后断开网络（此时内容页还在），把display:none改成display:block 运行（你修改之后运行需要刷新），结果是图片并没有被显示（网络都断开了还能显示个啥呀！）。”

作者: 47tz 发布时间: 2009-08-05

楼上的，我的意思就是检测display:none的时候有没有加载图片啊
如果加载了，那么浏览器的缓存里面就会有，即使断开了网络，display:block也能显示图片。
你们说的“加载”是什么意思呢？如果说是加载结构的话，那么这种讨论就完全没有意义，浏览器都是下载完整的html代码，而css只是负责表现样式。不管display:none还是display:block 我源代码里总是能看到吧，你们在讨论什么呢？

作者: kapiter 发布时间: 2009-08-05

html的代码是一开始就加载进来的。而且是第一个请求。

楼主说“能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢？“
这个要看你的实现目的了，也就是需要ajax，用iframe的作用。

测试display：none的时候，是否图片会加载的方法：
建一个页面，在一个隐藏的div的放一个img。
然后通过yslow的插件，关注下加载的请求就知道了。

作者: tenero 发布时间: 2009-08-05

问题是图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件。有原则上的区别。

作者: 47tz 发布时间: 2009-08-05

10#
你的例子已经很好的解释了这个东西，在看地址栏的时候我才明白。
它在加载网页的时候已经把那些把隐藏（display:none和visibility:hiddden）的结构都加载进来了。
看来只能用

引用:

传说中的 Ajax ？

才能实现了！

作者: kaka48265 发布时间: 2009-08-05

引用:

原帖由 47tz 于 2009-8-5 10:17 发表
问题是图片虽然在缓存里，但页面请求的不是缓存里的图片啊。网站上的图片是远程服务器上的，缓存只对远程路径不变的情况下才能起作用。
显然你断开网络之后路径就变化了，这个时候并不是请求本地机器上的缓存文件 ...

大哥你还是理解错了我的意思断开网络后display:block不显示图片，正是说明了没断网络之前display:none的时候图片并不加载，所以缓存里面没有嘛

作者: kapiter 发布时间: 2009-08-05

# kapiter
# 47tz
两位大虾你们讨论都有点不明白对方的意思。
我来打个太极，说明一下。（可能有所偏差）

# kapiter的意思是：断网的情况下，当你从新运行网页的时候，网页还是会向远程服务器发出请求（例子中说的即是那个图片了），并非请求本地缓存。
# 47tz的意思是：既然我本地缓存已经有了你这个图片，那么在断网的情况下，从新运行网页的时候那么就直接去请求本地缓存了。

如有说错的地方还请指出！

[ 本帖最后由 kaka48265 于 2009-8-5 13:58 编辑 ]

作者: kaka48265 发布时间: 2009-08-05

楼上的大哥你误解我的意思了我并不没有说断网情况下不会请求本地缓存啊
正是因为断网情况下display:block时，在缓存里面也查找不到图片，才说明了缓存里面没有图片，说明了display:none的时候并没有从网络上下载图片

如果一开始联网的时候display:block，那么图片就会被下载下来，然后再断网display:block，这时候因为缓存里面有图片所以图片是可以显示的。

这个有那么难理解么

作者: kapiter 发布时间: 2009-08-05

问题是，你设置了缓存没？
没设置好，你怎么知道浏览器一定读缓存？

作者: dcchan 发布时间: 2009-08-05

v是空白的
b是后来的可以补充上来
可以这么理解吧

作者: singlesoho 发布时间: 2009-08-05

拜托。。。你没看错吧？我的意思是相反的。怎么会去请求缓存呢？

作者: 47tz 发布时间: 2009-08-05

我发现我对你所说的确实理解歪哒

不过：

断开网络后display:block不显示图片，正是说明了没断网络之前display:none的时候图片并不加载

这个我觉得还是不能说明问题的。

作者: 47tz 发布时间: 2009-08-05

图片的 http 请求：
http://lifesinger.org/blog/2009/05/img-http-request/

作者: birdstudio 发布时间: 2009-08-05

呃....

全都下载.
这两个一个占位一个不占位..从字面都能理解咯.none和.hidden的区别

还有需要讨论的吗.散会~

作者: anime 发布时间: 2009-08-05

引用:

原帖由 birdstudio 于 2009-8-5 20:20 发表
图片的 http 请求：
http://lifesinger.org/blog/2009/05/img-http-request/

看他那篇文章下面的回复，有人指出问题了，他对firefox和opera在display:none的时候的测试应该有问题。
我刚才用科来抓包分析了一下，在display:none的时候确实不会向图片的源地址发出http请求，
改成display:block就可以看到浏览器发出的http请求了

作者: kapiter 发布时间: 2009-08-05

我想kapiter说的下面的意思：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> #test { display:none;border:1px #ccc solid;} </style> </head> <body> <div id="test"> <img src="http://image.yesky.com/TLimages/chinabyte/image/logo.png" title="春哥纯爷们" alt="" /> </div> <button onclick='show()'>断开网络后点击</button> <br> 如果断开网络后点击没有出现图片：说明display:none的结构并没有一开始就加载进来<br> 如果出现图片：说明display:none的结构一开始就加载进来了<br> 我想这应该能说明问题 </body> </html> <script type="text/javascript"> function show(){ document.getElementById('test').style.display = 'block'; } </script>
提示：您可以先修改部分代码再运行

[ 本帖最后由 okwxj 于 2009-9-6 00:48 编辑 ]

作者: okwxj 发布时间: 2009-09-06

这个试一下便知，上次我就发现了。一般用display:none; 因为visibility:hidden;依然占空间。

作者: qiancaotan 发布时间: 2009-09-06

用firebug就会看到结构加裁了。

<img src="1.jpg" style="display: none" />
结论：只有Opera不产生请求。
注意：用visibility: hidden隐藏图片时，在Opera下也会产生请求。

作者: meters 发布时间: 2009-11-13

唉，应该早点看这篇帖子的，我前几天去面试第一道鄙视题目就是这个，郁闷啊

作者: jws2003 发布时间: 2010-07-26

昨天在碰到一个h2标题时，标题用的是特殊字体，只能用图片替换，不过把标题和背景一起切，这个时候就可以对h2{overflow:hidden;}来解决。

作者: chuangnzh 发布时间: 2010-09-16

个人观点：
1.display visibility 的应用对象无论值为何，浏览器都会加载生产此对象的dom结构.
2. visibility:hidden的应用对象只保留并渲染该对象的尺寸
3.display:hidden的应用对象暂时不保留也不渲染该对象

作者: webdesigning 发布时间: 2010-09-16