html5移动端加载闪屏解决办法

html5移动端加载闪屏解决办法，其实很简单，给加一个加载过程动画效果就可以了，这样就不会出现闪屏效果，看起来与APP效果基本上是一样的了。

在<body>的下面加一个DIV层

    <div class="Loading"></div>

然后我们在公用的CSS代码中加入以下代码，其中loader.gif是一个加载动画，这个可以用简单点的，百度一下“loader”有很多这种gif动画文件。

.Loading {position: fixed;top: 0;bottom: 0;right: 0;left: 0;background: #fff url("/Images/loader.gif") no-repeat center;z-index: 9999;
}

然后再共公JS文件中加入以下代码

var Loading = function () { if (document.readyState == "complete") { $(".Loading").fadeOut(300, function () { $(this).remove() }) } };
document.onreadystatechange = Loading;

这样打开页面就会出现这样的效果了

这个加载时间设置很短，所以用户在打开的界面的时候，就只会从白到界面内容显法，有一个过渡效果出来了，就感觉不到像以前那样HTML5加载闪屏的感觉了。哈哈

html5移动端加载闪屏解决办法相关推荐

FlexPaper不能跨服务器加载远程文件解决办法
FlexPaper不能跨服务器加载远程文件解决办法再跨服务器的文件存放根目录中新建一个xml文件: crossdomain.xml <?xml version="1.0" ...
Lenovo E47A Ubuntu闪屏解决办法
Lenovo E47A Ubuntu闪屏解决办法: 安装nvidia显卡驱动包即可: $ sudo apt-get install nvidia-current $ sudo apt-get inst ...
WordPress Avada主题首页加载慢的解决办法
前言:WordPress Avada主题安装好后,前端页和后台加载慢的解决办法, 我们第一次安装并且导入演示数据后,访问网站首页和后台会非常的慢,经过排查,依然是网站头像是罪魁祸首,我们可以通过设置关 ...
百度编辑器Ueditor 初始化加载内容失败解决办法
原文地址为: 百度编辑器Ueditor 初始化加载内容失败解决办法项目上有用到百度文本编辑器ueditor,在页面加载的时候初始化编辑器内容时候,使用 $.document.ready(functi ...
联想LECOO电脑显示器闪屏解决办法
联想LECOO电脑显示器闪屏解决办法电脑屏幕闪屏原因二:显示器刷新率如果刷新率太低,屏幕可能会闪烁.现在显示器一般都有自动调节功能.您可以按下显示屏上的"AUTO"按钮,显示屏 ...
android webview加载闪屏,Android Webview：加载url时出现闪屏
我是Android应用程序中的新手,这是我的第一个应用程序. 我已经创建了启动画面和工程..但其后走了一个长长的白色空白屏幕约2-5秒,然后URL开始加载..Android Webview:加载url ...
【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
ThinkPHP笔记——配置分组产生无法加载Index错误解决办法
今天学习ThinkPHP的配置,看了手册的分组配置,发现分组配置是个好东西,必须得好好搞搞,结果搞得我那个~~~ 首先照着TP手册一步一步写: 然后,开始改写: 再然后,悲剧发生了~~~~~ NND, ...
微信公众号群发功能的页面元素加载不全的解决办法
解决了一个困扰我一晚上的问题昨天晚上突然发现,公众号的群发页面加载出现了点问题,好多内容都不显示.元素深查了一下,发现后台爆了一大堆的错误,主要就是各种元素因为"Refused to lo ...

html5移动端加载闪屏解决办法

html5移动端加载闪屏解决办法相关推荐

最新文章

热门文章