zoukankan      html  css  js  c++  java
  • JQuery+CSS3实现Ajax加载时loading效果

            之前通过Ajax请求加载数据的时候,在数据还没有呈现出来前,为了更好的用户体验,总会弄个loading告诉用户其实内容正在加载,而不是网站崩了。但是貌似之前使用gif图片的情况比较多,可能是为了兼容各个浏览器,但是CSS3已经很强大到我们可以自己使用动画写出一个loading效果出来,然后再通过调用JQuery的ajaxStart()和ajaxStop()这两个事件处理函数,就可以实现我们想要的loading效果了。

              这里主要介绍一个CSS3 loading的网站:http://cssload.net/  ,通过使用这个网站,我们可以通过几步就轻松地使用CSS3完成我们想要的loading效果,然后一键获得代码:

    360截图20150422100338166

    比如,在这里我选择了这样一个效果,然后点击GET CODE 按钮,就可以得到代码:

    #fountainG{
    position:relative;
    margin:10% auto;
    width:240px;
    height:29px}
    
    .fountainG{
    position:absolute;
    top:0;
    background-color:#33cc99;
    width:29px;
    height:29px;
    -webkit-animation:bounce_fountainG 1.3s infinite normal;
    -moz-animation:bounce_fountainG 1.3s infinite normal;
    -o-animation:bounce_fountainG 1.3s infinite normal;
    -ms-animation:bounce_fountainG 1.3s infinite normal;
    animation:bounce_fountainG 1.3s infinite normal;
    -moz-transform:scale(.3);
    -webkit-transform:scale(.3);
    -ms-transform:scale(.3);
    -o-transform:scale(.3);
    transform:scale(.3);
    border-radius:19px;
    }
    
    #fountainG_1{
    left:0;
    -moz-animation-delay:0.52s;
    -webkit-animation-delay:0.52s;
    -ms-animation-delay:0.52s;
    -o-animation-delay:0.52s;
    animation-delay:0.52s;
    }
    
    #fountainG_2{
    left:30px;
    -moz-animation-delay:0.65s;
    -webkit-animation-delay:0.65s;
    -ms-animation-delay:0.65s;
    -o-animation-delay:0.65s;
    animation-delay:0.65s;
    }
    
    #fountainG_3{
    left:60px;
    -moz-animation-delay:0.78s;
    -webkit-animation-delay:0.78s;
    -ms-animation-delay:0.78s;
    -o-animation-delay:0.78s;
    animation-delay:0.78s;
    }
    
    #fountainG_4{
    left:90px;
    -moz-animation-delay:0.91s;
    -webkit-animation-delay:0.91s;
    -ms-animation-delay:0.91s;
    -o-animation-delay:0.91s;
    animation-delay:0.91s;
    }
    
    #fountainG_5{
    left:120px;
    -moz-animation-delay:1.04s;
    -webkit-animation-delay:1.04s;
    -ms-animation-delay:1.04s;
    -o-animation-delay:1.04s;
    animation-delay:1.04s;
    }
    
    #fountainG_6{
    left:150px;
    -moz-animation-delay:1.17s;
    -webkit-animation-delay:1.17s;
    -ms-animation-delay:1.17s;
    -o-animation-delay:1.17s;
    animation-delay:1.17s;
    }
    
    #fountainG_7{
    left:180px;
    -moz-animation-delay:1.3s;
    -webkit-animation-delay:1.3s;
    -ms-animation-delay:1.3s;
    -o-animation-delay:1.3s;
    animation-delay:1.3s;
    }
    
    #fountainG_8{
    left:210px;
    -moz-animation-delay:1.43s;
    -webkit-animation-delay:1.43s;
    -ms-animation-delay:1.43s;
    -o-animation-delay:1.43s;
    animation-delay:1.43s;
    }
    
    @-moz-keyframes bounce_fountainG{
    0%{
    -moz-transform:scale(1);
    background-color:#33cc99;
    }
    
    100%{
    -moz-transform:scale(.3);
    background-color:#0099cc;
    }
    
    }
    
    @-webkit-keyframes bounce_fountainG{
    0%{
    -webkit-transform:scale(1);
    background-color:#33cc99;
    }
    
    100%{
    -webkit-transform:scale(.3);
    background-color:#0099cc;
    }
    
    }
    
    @-ms-keyframes bounce_fountainG{
    0%{
    -ms-transform:scale(1);
    background-color:#33cc99;
    }
    
    100%{
    -ms-transform:scale(.3);
    background-color:#0099cc;
    }
    
    }
    
    @-o-keyframes bounce_fountainG{
    0%{
    -o-transform:scale(1);
    background-color:#33cc99;
    }
    
    100%{
    -o-transform:scale(.3);
    background-color:#0099cc;
    }
    
    }
    
    @keyframes bounce_fountainG{
    0%{
    transform:scale(1);
    background-color:#33cc99;
    }
    
    100%{
    transform:scale(.3);
    background-color:#0099cc;
    }
    
    }

    同时也包含html结构:

    <div id="fountainG">
                        <div id="fountainG_1" class="fountainG">
                        </div>
                        <div id="fountainG_2" class="fountainG">
                        </div>
                        <div id="fountainG_3" class="fountainG">
                        </div>
                        <div id="fountainG_4" class="fountainG">
                        </div>
                        <div id="fountainG_5" class="fountainG">
                        </div>
                        <div id="fountainG_6" class="fountainG">
                        </div>
                        <div id="fountainG_7" class="fountainG">
                        </div>
                        <div id="fountainG_8" class="fountainG">
                        </div>
    </div>

    最后,将html结构放在比如文章列表或者其他需要Ajax请求加载的地方,然后使用JQuery来实现最终的效果:

    function loadingEffect() {
        var loading = $('#fountainG');
        loading.hide();
        $(document).ajaxStart(function () {
            loading.show();
        }).ajaxStop(function () {
            loading.hide();
        });
    }
    loadingEffect();

    这样就完成了,具体喜欢哪个loading效果,该网站提供了十几种效果,已经够用了。当然如果你觉得这些效果很简单,也完全可以自己写出来,但对于我这种菜鸟,直接拿来用确实挺方便,效率高,而且还可以读一下源码,给自己一些想法。最后,CSS3实现loading效果确实挺nice,但如果要兼容浏览器的话,最好使用渐进增强方法来实现,确保低版本依旧可以使用gif图片代替。

  • 相关阅读:
    SAP系统和微信集成的系列教程之十:如何在SAP C4C系统里直接回复消息给微信用户
    SAP系统和微信集成的系列教程之九:如何将微信用户发送给微信公众号的内容自动转存到SAP C4C系统
    SAP系统和微信集成的系列教程之八:100行代码在微信公众号里集成地图搜索功能
    漫谈SAP产品里页面上的Checkbox设计与实现系列之一
    一个SAP成都研究院开发工程师的2020年度总结:未知生,焉知死
    Angular form控件原生HTML代码里ng-reflect-form属性和其值的生成时机
    一个SAP成都研究院开发工程师2020年所有文章列表
    SAP系统和微信集成的系列教程之七:使用Redis存储微信用户和公众号的对话记录
    用shell脚本从git上拉取,项目目录下所有各个子项目代码
    shell脚本小计
  • 原文地址:https://www.cnblogs.com/jr1993/p/4446682.html
Copyright © 2011-2022 走看看