zoukankan      html  css  js  c++  java
  • 页面预加载loading动画,再载入内容

    默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容,这样的用户体验更好。

    例如此链接:http://crusader12.com/C12HoverAlls/

    这篇文章是从上面链接的内容上拔下来的,操作流程很简单,只有两部如下

    首先定义一个loader.css文件,如下内容

    .chromeframe {
        margin: 0.2em 0;
        background: #ccc;
        color: #000;
        padding: 0.2em 0;}
    #loader-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index:999999;}
    #loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        /* COLOR 1 */
        border-top-color: #FFF;
        -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -ms-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
        -moz-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */ 
        -o-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */   
            animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
        z-index:1001;}
    #loader:before {
            content: "";
            position: absolute;
            top: 5px;
            left: 5px;
            right: 5px;
            bottom: 5px;
            border-radius: 50%;
            border: 3px solid transparent;
            /* COLOR 2 */       
            border-top-color: #FFF;
            -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            -moz-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */              
            animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
    #loader:after {
            content: "";
            position: absolute;
            top: 15px;
            left: 15px;
            right: 15px;
            bottom: 15px;
            border-radius: 50%;
            border: 3px solid transparent;
            border-top-color: #FFF;
            /* COLOR 3 */       
            -moz-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            -o-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
            -ms-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */        
            -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
              animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */}
    
    
    @-webkit-keyframes spin {
            0%{ 
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }100%{
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
    }
    
    @keyframes spin {
            0%{ 
                -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(0deg);  /* IE 9 */
                transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
            }100%{
                -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: rotate(360deg);  /* IE 9 */
                transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */}
    }
    
    
    #loader-wrapper .loader-section {
            position: fixed;
            top: 0;
            width: 51%;
            height: 100%;
            background: #1abc9c; /* Old browsers */
            z-index: 1000;
            -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */
            -ms-transform: translateX(0);  /* IE 9 */
            transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */}
    #loader-wrapper .loader-section.section-left {left: 0;}
    #loader-wrapper .loader-section.section-right {right: 0;}
    
    /* Loaded */
    .loaded #loader-wrapper .loader-section.section-left {
            -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: translateX(-100%);  /* IE 9 */
                    transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
                    transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
    .loaded #loader-wrapper .loader-section.section-right {
            -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: translateX(100%);  /* IE 9 */
                    transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  
            transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);}
    .loaded #loader {
            opacity: 0;
            -webkit-transition: all 0.3s ease-out;  
                    transition: all 0.3s ease-out;}
    .loaded #loader-wrapper {
            visibility: hidden;
            -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */
                -ms-transform: translateY(-100%);  /* IE 9 */
                    transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */
            -webkit-transition: all 0.3s 1s ease-out;  
                    transition: all 0.3s 1s ease-out;}
    /* JavaScript Turned Off */
    .no-js #loader-wrapper {display: none;}
    .no-js h1 {color: #222222;}
    #loader-wrapper .load_title {
        font-family:'Open Sans';
        color:#FFF; font-size:19px; width:100%; text-align:center; z-index:9999999999999; position:absolute; top:60%; opacity:1; line-height:30px; }
    #loader-wrapper .load_title span {  font-weight:normal; font-style:italic; font-size:13px; color:#FFF; opacity:0.5;}

    第二步:在网站页面header标签和body标签加入以下代码

    // 引入jquery 
    
    <!--页面加载start-->
    <link rel="stylesheet" type="text/css" href="css/loader.min.css">
    
    <script type="text/javascript">         
        // 等待所有加载
        $(window).load(function(){
            $('body').addClass('loaded');
            $('#loader-wrapper .load_title').remove();
        }); 
    </script>    
    
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
        <div class="load_title">正在加载LoveFeel站点<br><span>V1.0</span></div>
    </div>
    <!--页面加载end-->

    HoverAlls页面源码如下操作,他先是加载一段json封装之后再显示内容的,我上面的代码省去了json的操作。

    $(window).load(function(){
        $('body').addClass('loaded').Chameleon({
            'current_item':'hoveralls',
            'json_url':'../Envato/items.json'
        });
        $('#loader-wrapper .load_title').remove();
    }); 

    当然也可以访问我的页面看看效果 
    http://wechat.daopeng365.com/web/wechat/html/index.html

    查看原文:http://www.ibloger.net/article/401.html

    相关阅读:

    30种CSS3炫酷页面预加载loading动画特效(推荐):http://www.ibloger.net/article/1558.html 
    Loaders.css 多种纯CSS加载进度动画效果:http://www.ibloger.net/article/1568.html 
    load-awesome 53种纯css3预加载页面loading指示器动画特:效http://www.ibloger.net/article/1800.html 
    CSS3-Preloaders 6种CSS3预加载Loading指示器动画特效:http://www.ibloger.net/article/1556.html 
    按钮特效 基于SVG和Segment.js的Loading加载:http://www.ibloger.net/article/1554.html

  • 相关阅读:
    如何将网格式报表打印成其它样式
    拥有与实力不相称的脾气是种灾难——北漂18年(23)
    8.8.1 Optimizing Queries with EXPLAIN
    mysql 没有rowid 怎么实现根据rowid回表呢?
    secondary index
    8.5.5 Bulk Data Loading for InnoDB Tables 批量数据加载
    mysql 中key 指的是索引
    8.5.4 Optimizing InnoDB Redo Logging 优化InnoDB Redo 日志
    8.5.3 Optimizing InnoDB Read-Only Transactions 优化InnoDB 只读事务
    8.5.1 Optimizing Storage Layout for InnoDB Tables InnoDB表的存储布局优化
  • 原文地址:https://www.cnblogs.com/yesu/p/7009233.html
Copyright © 2011-2022 走看看