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

hnpvqve

于 2019-07-16 19:39:21 发布

阅读量4.3k

点赞数 1

文章标签： HTML5闪屏 h5移动端闪屏 h5加载闪屏

本文链接：https://blog.youkuaiyun.com/hnpvqve/article/details/96172913

版权

本文介绍了一种简单的方法来解决HTML5移动端加载时的闪屏问题：通过添加加载动画，提升用户体验，使页面加载更加平滑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

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