您当前的位置:首页 > 建站常识 > css强化

CSS隐藏属性加载问题

2016-03-21
  并不是所有元素都会被加载
  我们先来测试图片,对图片设置隐藏属性,然后测试图片是否会被加载。
  1.写在页面上的img标签,无论显示与否,图片都会被加载(所以试图通过对图片display:none来达到节省网络流量的做法就省省吧。。。
  2.经常使用backgroung-image等css属性为页面添加图片,这些图片是不是一定会被加载呢?
  看例子:
  测试结果:
  结果如下:
  我们可以发现图片0和4没有被下载,
  0,是没有用到的CSS,不会被加载;
  1,div默认block属性,尽管页面上图片不显示(没有设置当前块级元素的宽高),但还是加载了;
  2,div默认block属性,尽管页面上图片不显示(没有设置当前块级元素的宽高),但还是加载了;
  3,父容器的visibility属性设置为hidden属性,div默认block属性,尽管页面上图片不显示(没有设置当前块级元素的宽高),但还是加载了;
  4,父容器的display被设为none的情况,图片没有被加载。
  我们在来对比一下display:none和visibility:hidden的区别:
  display:none元素在页面上将彻底消失,元素本来占有的空间就会被其他元素占有,也就是说它会导致浏览器的重排和重绘。
  visibility:hidden适用于那些元素隐藏后不希望页面布局会发生变化的场景,元素在页面消失后,其占据的空间依旧会保留着,所以它只会导致浏览器重绘而不会重排。
  display属性详解:http://www.20707.net/cs/qh/170.html
本文关键词:CSS隐藏属性加载问题  图片  测试  属性  元素  问题  

一切精彩源自七七网络!我们倾力打造时尚潮流第一线!

© 2012-2024七七世界网站建设     20707.net 1125w.com 版权所有     豫ICP备14018694号-1