html display和visibility在资源加载上的区别

  想要把一个html里的UI组件设置为可见/不可见,可以用两个属性,display=none/block, visibility=hidden/visible, 网上的解释是display虽然可以让一个组件变的不可见,但是其所占区域也会消失掉,visibility让一个组件不可见的同时,其所占区域还在,位置也还在,仅仅是看不见而已;

  但其实在实际项目开发中我发现还有一层意思:

  如果一个带有背景图的div的display默认为none时,在网页第一次打开时,不会自动加载,直到把其设置为可见之后,才会去加载,可以很明显的看到图片由模糊到清晰的显示过程,拿微信h5来举例子,用户可能就会不太喜欢刚才说的这种体验,宁愿在第一次打开时来个等一会加载全部资源,也不希望在每打开一个新界面时,要卡顿一会儿,如果把display="none"改为visibility="hidden",第一次虽然不可见,但是其还是会加载资源的,当由不可见变成可见的那一刻,一下子就出来了不会有卡顿,因为该在那里的都在那里,宽度,高度等等都在,经过测试,使用visiblity时第一次打开页面时确实要比全部使用display loading的时间要久,因为是在加载全部资源。这样看来,但是和一些较小型的h5游戏的预加载处理方式有些接近了。

   所以,结论就是,如果是不使用canvas的html原生项h5目,如果你的h5是一个单页结构,众多的带有大背景图的div页面需要在不可见和可见之间切换,那么建议使用visibility,在第一个界面,加一个loading字样,这样以保证全部界面在打开的那一刻,不会因为资源大网络慢而出现卡顿。

原文地址:https://www.cnblogs.com/JD85/p/8504623.html