JQuery+CSS3实现Ajax加载时loading效果

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

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

比如,在这里我选择了这样一个效果,然后点击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图片代替。

时间: 2024-11-08 22:06:20

JQuery+CSS3实现Ajax加载时loading效果的相关文章

ajax加载菊花loading效果

Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS样式,就可以创建一个Ajax Loading指示器. Spin.js的在线设计.演示及下载地址为:http://fgnass.github.io/spin.js/ 我们可以在链接页面中,动态设置样式,就会自动生成样式的配置脚本: 设置之后,下图就是我们需要配置的样式: 一.显示菊花loading <

通过jQuery设置全局Ajax加载时呈现Loading

全局设置: $(document).bind("ajaxSend", function () { $("#loading_message").show(); }).bind("ajaxComplete", function () { $("#loading_message").hide(); }); 特殊Ajax请求如果不想呈现Loading,只需增加:global:false即可 $.ajax({ type: "G

页面加载时遮罩效果

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>页面加载时遮罩效果</title>        <script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>      

Ajax全局加载框(Loading效果)的配置

在Ajax进行后台数据请求的过程中,我们有时候会希望用户能知道页面后台还在做一些事情,这时候就需要给用户一个非常明确的提示,也就是我们所谓的进度条 废话完成~ 实现原理: Jquery可以对ajax进行全局的设置,实现类似于C#中面向切面的效果,即对在Ajax提交之前和提交完成之后,我们均可以对其进行一系列的操作,所以我们可以在ajax开始的时候,把Loading框显示出来,在ajax请求完成之后,把loading框关闭掉,基本上就完美实现这个效果了. Jquery全局配置Ajax的方式为: 1

jquery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较

想要添加这个效果,先来弄明白页面的加载和事件执行顺序,看这个简单例子: 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head > 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4 <title>验证加载顺序</title> 5 <s

ajax加载时的进度条

运行效果如下图,pc和移动都可以展示,调用方法很简单,开始调用:loading.baosight.showPageLoadingMsg(false),false代表不现实加载说明,true展示加载说明.调用完成后调用:loading.baosight.hidePageLoadingMsg(),有两个文件,一个是js文件,一个是css文件.别忘记引入jquery.js哦.想了解更多的可以加qq群:106320003 css文件 #_loadMsg{ display: inline-block; w

Ajax加载菊花loding效果

Ajax 异步请求的时候,一般都会利用一个动态的 Gif 小图片来制作一个Ajax Loading ,以便增加用户体验. 这里我们使用Spin.js ,该 js 脚本压缩后5k,可以不用任何图片,任何外部的CSS样式,就可以创建一个Ajax Loading 指示器 Spin.js 的在线设计.演示及下载地址为:http://fgnass.github.io/spin.js/ 我们可以在链接页面中,动态设置样式同时会自动生成样式的配置脚本: Spin.js 用法极其的简单: 显示 spinner

Android进度加载的Loading效果

网上看到的一个开源项目的loading效果,效果很赞,记录一下: 开源项目地址如下:https://github.com/RomainPiel/Titanic

css3 ajax加载进度线

最近想了想ajax加载时的进度选项,今天用css3来实现下,后面再补上js的应用,来完成兼容; <button onclick="start()">button</button> <p id="string"></p> body{ width: 500px } #string { width: 0%; height: 2px; width: 100%; margin: 0; background-color: #159