display:none与visibility:hidden的区别

使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;

而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。

那么使用<div style="display:none"><img src="xxx.jpg" /><div>。浏览器是否会从服务器下载该图呢?

回答:这个之前腾讯的开发组做过测试,不同浏览器下面表现不同,但是基本上都是加载的,不管你是display:none还是visibility:hidden,亦或是opacity:0,都会加载的。

所以:

会不会加载图片?会加载
会不会影响打开速度?会影响打开速度。如果设置为display:none,会加快网页的渲染速度。

原文地址:https://www.cnblogs.com/sunflower627/p/4873259.html