想要把一个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字样,这样以保证全部界面在打开的那一刻,不会因为资源大网络慢而出现卡顿。

html display和visibility在资源加载上的区别的更多相关文章

  1. High Performance Networking in Google Chrome 进程间通讯(IPC) 多进程资源加载

    小结: 1. 小文件存储于一个文件中: 在内部,磁盘缓存(disk cache)实现了它自己的一组数据结构, 它们被存储在一个单独的缓存目录里.其中有索引文件(在浏览器启动时加载到内存中),数据文件( ...

  2. Direct2D开发:从资源加载位图

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 Direct2D使用Windows图像处理组件 (WIC) 来加载位图.从文件加载位图的方法很简单,而且网上的教 ...

  3. prelaod场景,用来显示资源加载进度

    phaser.js的源码可以到它在github上的托管里去下载,游戏要用到的图片声音等素材资源请点击这里下载.Phaser的使用非常简单,只需要引入它的主文件,然后在页面中指定一个用来放置canvas ...

  4. 【Android开发学习笔记】【高级】【随笔】插件化——资源加载

    前言 上一节我们针对插件最基本的原理进行了一个简单的demo实现,但是由于插件的Context对象被宿主所接管,因此无法加载插件程序的资源.那么如何解决这个问题捏? 有人提出这样的方案:将apk中的资 ...

  5. Duilib学习笔记《07》— 资源加载

    Duilib的界面表现力能如此丰富,很大程度上得益于贴图描述的简单强大.通过之前的学习及参看相关例子,我们可以发现,在XML布局文件中,不管是窗体背景还是控件,都添加了对应的图片资源以此来美化界面.而 ...

  6. Unity3D之Mecanim动画系统学习笔记(十):Mecanim动画的资源加载相关

    资源加载是必备的知识点,这里就说说Mecanim动画的资源如何打包及加载. 注意,Unity4.x和Unity5.x的AssetBundle打包策略不一样,本笔记是基于Unity4.x的AssetBu ...

  7. cocos2d-x Loading界面实现资源加载

    有时候场景中的资源加载过多的话就会引起游戏进入的时候很卡,因为那是边加载边显示.在tests例子里面有一个很好的例子叫做TextureCacheTest,里面讲解了如何写loading. #inclu ...

  8. 【原】从一个bug浅谈YUI3组件的资源加载

    篇前声明:为了不涉及业务细节,篇内信息统一以某游戏,某功能代替 前不久,某游戏准备内测客户端,开发人员测试过程中发现某功能突然不灵了,之前的测试一切ok,没有发现任何异常,第一反应是,游戏内浏览器都是 ...

  9. 【Chromium中文文档】多进程资源加载

    多进程资源加载(需要更新) 转载请注明出处:https://ahangchen.gitbooks.io/chromium_doc_zh/content/zh//General_Architecture ...

随机推荐

  1. Selenium WebDriver 2.34.0 发布,支持Firefox22

    Selenium WebDriver 2.34.0 发布,支持Firefox22http://automationqa.com/forum.php?mod=viewthread&tid=270 ...

  2. iOS 调整图片尺寸,告诉你的UI,别问我尺寸!我要最大的

    如果UI问你“这个图片你要多大尺寸的?”,你该怎么回答呢? 为了不让图片因拉伸或压缩而变形或模糊,请精确告诉UI图片的比例,至于图片的分辨率,不必要要求太严,但是最低要求是要让最大的屏幕不会出现前面描 ...

  3. 系统OOM复位定位

    定位OOM的工具: 1.多次收集Thread Dump信息kill -3  PID通过对比分析heap 对象信息和Thread信息来定位 2.通过 -Xloggc:D:/gc.log  -XX:+He ...

  4. Linux网络IO函数以及TCP连接函数包装

    标准I/O VS 网络IO 标准I/O又称为标准I/O流,从某种意义上讲是全双工的,因为程序能够在同一个流上执行输入和输出. Unix/Linux对网络的抽象是一种称为套接字的文件类型.和任何Unix ...

  5. 添加一个vue全局守卫,主要用于用户登录时候验证

    //注册一个全局守卫,作用是在路由跳转钱,对路由进行判断,防止未登录用户跳转到其他页面 router.beforeEach((to, from, next) => { let token = l ...

  6. 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统

    安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...

  7. Spring MVC执行原理和基于Java的配置过程

    一.Spring MVC执行原理和基于Java配置的配置过程 (一)Spring MVC执行过程,大致为7步. 所有的请求都会经过Spring的一个单例的DispacherServlet. Dispa ...

  8. jsp select multiple

    //File: index.html<HTML>    <HEAD>        <TITLE>Submitting Multiple Selection Sel ...

  9. Win7.还原默认打开方式

    1.win7还原默认打开方式_百度知道.html(https://zhidao.baidu.com/question/1668708948433912307.html) Windows7:[47]打开 ...

  10. 关于angularJS的$watch的 一些小用法

    $watch方法,它可以帮助我们在每个scope中监视其中的变量. $watch 单一的变量 对于普通的变量时,如数字,字符串等,直接如下写是可以监视到变量的变化,并执行相应的函数的. $scope. ...