收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 89947|回复: 32

[讨论] display:none和visibility:hidden的区别!

[复制链接]
发表于 2009-8-4 12:15:47 | 显示全部楼层 |阅读模式
在网站上看到:“
display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能,但两者有所区别,经过亲自实验,我发现使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。
”这样的解释。
但是我觉得并不够,所以就想了一下关于他的一个加载问题。
有属性display:none;的结构在加载页面时,是否会同时加载呢?或则是当他变成display:block;的时候才加载的呢?
有属性visibility:hidden;   的结构在加载页面时,是否会同时加载呢?或则是当他变成visibility:visible;   的时候才加载的呢?

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

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

[[i] 本帖最后由 kaka48265 于 2009-8-4 13:54 编辑 ]
发表于 2009-8-4 12:20:57 | 显示全部楼层
这个问题,前些天我去参加一个面试的时候,面试官问过我。回来仔细研究了下,你的解释是完全正确的。

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

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

就这样理解即可。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-4 12:47:19 | 显示全部楼层
非常感谢你的解释!
我的问题你已经很好的跟我解释了。
不过不知道我们是否能扩展一下。
能否实现一个在点击它显示这个结构的时候他才加载的方法。
如果用一个iframe可否实现呢?
(我们暂且不说他合不合理。)

[[i] 本帖最后由 kaka48265 于 2009-8-4 12:49 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-8-4 12:53:27 | 显示全部楼层
  1. visibility
复制代码
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-4 13:08:16 | 显示全部楼层
原帖由 [i]birdstudio 于 2009-8-4 12:53 发表
visibility


亲爱的版主,麻烦您稍稍的解释一下。
我真不懂。
我上面好像有说到visibility 这个属性。
回复 支持 反对

使用道具 举报

发表于 2009-8-4 13:42:58 | 显示全部楼层
display属性设定为“none”的元素将不产生任何的框(Box),也就是说,元素对布局没有影响,浏览器将不显示该元素,包括其后代元素。更不会占位。
而如果设定“visibility : hidden”则会生成元素框,只是元素“不可视”,而其他非视觉的属性都将生效,例如widht、padding等。
回复 支持 反对

使用道具 举报

发表于 2009-8-4 13:46:50 | 显示全部楼层

回复 5# kaka48265 [楼主] 的帖子

你自己检查一下你的拼写。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-8-4 13:58:00 | 显示全部楼层
6#
谢谢你的解释。
不过并非我们讨论的范围了!
7#
谢谢提醒,已经修改。

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

使用道具 举报

发表于 2009-8-4 14:08:43 | 显示全部楼层
原帖由 [i]kaka48265 于 2009-8-4 13:58 发表
如何实现控制它显示的时候它才加载进页面的方法。

传说中的 Ajax ?
回复 支持 反对

使用道具 举报

发表于 2009-8-4 20:29:13 | 显示全部楼层

 提示:您可以先修改部分代码再运行

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

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


页面载入的时候请注意看你浏览器的状态栏。
回复 支持 反对

使用道具 举报

发表于 2009-8-4 21:44:13 | 显示全部楼层
上楼的对,display:none和visibility:hidden都在页面加载时加载了。
你说visibility:hidden看不见但摸得到?我怎么摸不到呢?用ie和ns都摸不到,只是占用了位置。
回复 支持 反对

使用道具 举报

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

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

发表于 2009-8-5 08:51:25 | 显示全部楼层

回复 12# kapiter 的帖子

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

显然这是不成立的。

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

使用道具 举报

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

使用道具 举报

发表于 2009-8-5 09:52:04 | 显示全部楼层
html的代码是一开始就加载进来的。而且是第一个请求。

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

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

使用道具 举报

发表于 2009-8-5 10:17:07 | 显示全部楼层

回复 14# kapiter 的帖子

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

使用道具 举报

 楼主| 发表于 2009-8-5 13:09:36 | 显示全部楼层
10#
你的例子已经很好的解释了这个东西,在看地址栏的时候我才明白。
它在加载网页的时候已经把那些把隐藏(display:none和visibility:hiddden)的结构都加载进来了。
看来只能用
传说中的 Ajax ?
才能实现了!
回复 支持 反对

使用道具 举报

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


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

使用道具 举报

 楼主| 发表于 2009-8-5 13:57:24 | 显示全部楼层
# kapiter
# 47tz
两位大虾你们讨论都有点不明白对方的意思。
我来打个太极,说明一下。(可能有所偏差)

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

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

[[i] 本帖最后由 kaka48265 于 2009-8-5 13:58 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-8-5 14:09:14 | 显示全部楼层
楼上的大哥  你误解我的意思了  我并不没有说断网情况下不会请求本地缓存啊
正是因为断网情况下display:block时,在缓存里面也查找不到图片,才说明了缓存里面没有图片,说明了display:none的时候并没有从网络上下载图片

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

这个有那么难理解么
回复 支持 反对

使用道具 举报

发表于 2009-8-5 14:32:53 | 显示全部楼层

回复 18# kapiter 的帖子

问题是,你设置了缓存没?
没设置好,你怎么知道浏览器一定读缓存?
回复 支持 反对

使用道具 举报

发表于 2009-8-5 15:13:43 | 显示全部楼层
v是 空白的
b是后来的可以补充上来
可以这么理解吧
回复 支持 反对

使用道具 举报

发表于 2009-8-5 20:03:49 | 显示全部楼层

回复 19# kaka48265 [楼主] 的帖子

拜托。。。你没看错吧?我的意思是相反的。怎么会去请求缓存呢?
回复 支持 反对

使用道具 举报

发表于 2009-8-5 20:06:57 | 显示全部楼层

回复 20# kapiter 的帖子

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

不过:

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

这个我觉得还是不能说明问题的。
回复 支持 反对

使用道具 举报

发表于 2009-8-5 20:20:42 | 显示全部楼层
回复 支持 反对

使用道具 举报

发表于 2009-8-5 20:26:27 | 显示全部楼层
呃....

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

还有需要讨论的吗.散会~
回复 支持 反对

使用道具 举报

发表于 2009-8-5 22:01:20 | 显示全部楼层
原帖由 [i]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请求了
回复 支持 反对

使用道具 举报

发表于 2009-9-6 00:46:31 | 显示全部楼层
我想kapiter说的下面的意思:

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 okwxj 于 2009-9-6 00:48 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-9-6 03:12:22 | 显示全部楼层
这个试一下便知,上次我就发现了。一般用display:none; 因为visibility:hidden;依然占空间。
回复 支持 反对

使用道具 举报

发表于 2009-11-13 14:18:32 | 显示全部楼层
用firebug就会看到结构加裁了。

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

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-5-31 17:50 , Processed in 0.125661 second(s), 8 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表