html display和visibility在资源加载上的区别
2024-08-28 00:30:11
想要把一个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字样，这样以保证全部界面在打开的那一刻，不会因为资源大网络慢而出现卡顿。
最新文章
- 拜拜了,浮动布局-基于display:inline-block的列表布局
- 【温故Delphi】Win32API之CreateMutex
- C++中对象初始化
- MinGW/MSYS 交叉编译环境搭建
- 15.RDD 创建内幕解析
- [r]How To Use Git To Create A Key
- Android LayoutInflater和findViewById 源码详解
- 使用Botkit和Rasa NLU构建智能聊天机器人
- element-ui el-input只显示下划线
- H5 60-浮动元素排序规则
- linux命令行抓取网页快照
- jenkins windows slave 构建c/c++代码
- oracle 多行合并为一行
- python中内建函数isinstance的用法
- iOS应用开发最佳实践
- c语言静态断言
- 在ubuntu上配置LAMP架构
- [ES6] 07. Default Value for function param
- 热烈祝贺阿尔法Go首战告捷
- Android去掉标题的方法