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