所属分类 WEB

关于预加载动画

网站首页增加一个预加载动画，让用户首次访问网站的时候不会因为等待资源准备时间过长而感到枯燥。

CSS3的动画效果利用的是keyframes帧动画能力，可以理解为纯代码实现了界面的动画效果。

以前很多人会使用一个动态的图片作为预加载动画，效果很酷。

不过gif的图片相对而言会比较大一点，如果想展现更加优秀的动画效果，就需要精细的图片+更多的帧。

制作一个动态的gif本身并不困难，不太好的地方在于不能够随意更换以及自定义色彩。

因此，使用Jquery+CSS3+HTML一个新的方案来替代图片是一个比较好的解决方案。

引入Jquery

99%的网站一般都会引入Jquery库，通过Chrome内核的浏览器，右击查看网站源代码。

Ctrl+F调出搜索框，输入Jquery，检查您的网站是否引入了Jquery库。

如果没有，您需要考虑使用原生JS代码实现class的移除等。

这里为了让案例简洁，直接使用Jquery库来实现。（利用原生JS也可以实现）

实现思路

打开页面在默认显示加载的动画元素（因此动画元素应当浮在所有内容的上方并盖住其他内容）
JS判断页面DOM是否Load完成（$(window).load 和 $(document).ready 都可以使用，虽然有差别，整体感知不明显）
Load完成后对动画元素隐藏即可

定义preloading.css

由于CSS中的特效定义比较多，解释起来比较麻烦。

感兴趣可以学习一些CSS3的线性动画特性。

.loader{
    position:fixed;
    left:50%;
    top:50%;
    margin:-0.2em 0 0 -0.2em;
    text-indent:-9999em;
    border-top:.3em solid rgba(0,0,0,0.1);
    border-right:.3em solid rgba(0,0,0,0.1);
    border-bottom:.3em solid rgba(0,0,0,0.1);
    border-left:.3em solid #9cc;
    /* 篇幅原因省略了一些兼容性CSS配置 */
    transform:translateZ(0);
    /* 关键CSS：关联对应的动画配置loader ，篇幅原因省略了一些兼容性CSS配置 */
    animation:loader .5s infinite linear;
    z-index:999;
}
.loader,.loader:after{
    border-radius:50%;width:2em;height:2em
}
.curtain{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background-color:white;
    filter:alpha(opacity=0);
    opacity:0;
    z-index:0
}
.sending .curtain{
    top:0px;
}
/* 动画配置loader，篇幅原因省略了一些兼容性CSS配置 */
@keyframes loader{
    0%{
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    100%{
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}
.is-loading .loader,.is-loading .curtain
{
    filter:progid:DXImageTransform.Microsoft.Alpha(enabled=false);
    opacity:1
}
.is-loading .curtain{
    z-index:999
}
/* 自定义滚动条样式，可有可无 */
::-webkit-scrollbar
{
    width:12px;
    height:12px;
}
::-webkit-scrollbar-thumb
{
    border-radius:2px;
    background-color:#99cccc;
    background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.2) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.2) 75%,transparent 75%,transparent);
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow:inset 0 0 6px #ddd;
    background-color:#fbfbfb;
    border-radius:2px;
}

引入CSS文件

放在head便签区域内的最下方（尽量优先加载）。

<head>
    <link rel="stylesheet" type="text/css" href="css/preloading.css">
</head>

定义元素并应用

放在body区域最上方，主要便于浮动时可以盖住其他元素。

<body>
    <div class="is-loading" id="load"> 
        <div class="curtain">
            <div class="loader">
            </div>
        </div>
    </div>

<script type="text/javascript">
//确保Jquey已加载后执行进入 
(function($){
    //$(window).load 和 $(document).ready 都可以使用，虽然有差别，整体感知不明显
    $(window).on("load", function() { 
        window.setTimeout(function() {
            //隐藏或者移除Class均可以使用
            //推荐用CSS特性实现 
            //$("#load").removeClass("is-loading");
            $("#load").hide(500);
        }, 100);
    });
})(jQuery);
</script>
</body>