fakeLoader.js-针对WebApp中的 “假”预加载
在做移动端网站的时候，前端有时候需要一些过渡效果，当然我们肯定首先想到肯定是用css3做一个过渡动画，nice，那我给大家一个好用的jQuery插件吧，让你三行代码实现这种过渡动画效果。
1.由于该插件js代码并不多，我贴出来一看究竟:
fakeLoader.js :
(function(b) {
b.fn.fakeLoader = function(m) {
var f = b.extend({
timeToHide: 1200,
pos: "fixed",
top: "0px",
left: "0px",
width: "100%",
height: "100%",
zIndex: "999",
bgColor: "#2ecc71",
spinner: "spinner7",
imagePath: ""
}, m);
var l = '<div class="fl spinner1"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>';
var k = '<div class="fl spinner2"><div class="spinner-container container1"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container2"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div><div class="spinner-container container3"><div class="circle1"></div><div class="circle2"></div><div class="circle3"></div><div class="circle4"></div></div></div>';
var j = '<div class="fl spinner3"><div class="dot1"></div><div class="dot2"></div></div>';
var i = '<div class="fl spinner4"></div>';
var h = '<div class="fl spinner5"><div class="cube1"></div><div class="cube2"></div></div>';
var g = '<div class="fl spinner6"><div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div><div class="rect5"></div></div>';
var e = '<div class="fl spinner7"><div class="circ1"></div><div class="circ2"></div><div class="circ3"></div><div class="circ4"></div></div>';
var d = b(this);
var c = {
position: f.pos,
width: f.width,
height: f.height,
top: f.top,
left: f.left
};
d.css(c);
d.each(function() {
var n = f.spinner;
switch (n) {
case "spinner1":
d.html(l);
break;
case "spinner2":
d.html(k);
break;
case "spinner3":
d.html(j);
break;
case "spinner4":
d.html(i);
break;
case "spinner5":
d.html(h);
break;
case "spinner6":
d.html(g);
break;
case "spinner7":
d.html(e);
break;
default:
d.html(l)
}
if (f.imagePath != "") {
d.html('<div class="fl"><img src="' + f.imagePath + '"></div>');
a()
}
});
setTimeout(function() {
b(d).fadeOut()
}, f.timeToHide);
return this.css({
backgroundColor: f.bgColor,
zIndex: f.zIndex
})
};
function a() {
var c = b(window).width();
var e = b(window).height();
var d = b(".fl").outerWidth();
var f = b(".fl").outerHeight();
b(".fl").css({
position: "absolute",
left: (c / 2) - (d / 2),
top: (e / 2) - (f / 2)
})
}
b(window).load(function() {
a();
b(window).resize(function() {
a()
})
})
}(jQuery));
这里我将插件的7种预定义动画都特别加粗标注.
接下来在来悄悄CSS代码 :
fakeLoader.css :
.spinner1 {
width: 40px;
height: 40px;
position: relative;
}
.double-bounce1, .double-bounce2 {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #fff;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.double-bounce2 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.spinner2 {
width: 40px;
height: 40px;
position: relative;
}
.container1 > div, .container2 > div, .container3 > div {
width: 6px;
height: 6px;
background-color: #fff;
border-radius: 100%;
position: absolute;
-webkit-animation: bouncedelay 1.2s infinite ease-in-out;
animation: bouncedelay 1.2s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner2 .spinner-container {
position: absolute;
width: 100%;
height: 100%;
}
.container2 {
-webkit-transform: rotateZ(45deg);
transform: rotateZ(45deg);
}
.container3 {
-webkit-transform: rotateZ(90deg);
transform: rotateZ(90deg);
}
.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }
.container2 .circle1 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.container3 .circle1 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.container1 .circle2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.container2 .circle2 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
.container3 .circle2 {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s;
}
.container1 .circle3 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.container2 .circle3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.container3 .circle3 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.container1 .circle4 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
.container2 .circle4 {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
.container3 .circle4 {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.spinner3 {
width: 40px;
height: 40px;
position: relative;
-webkit-animation: rotate 2.0s infinite linear;
animation: rotate 2.0s infinite linear;
}
.dot1, .dot2 {
width: 60%;
height: 60%;
display: inline-block;
position: absolute;
top: 0;
background-color: #fff;
border-radius: 100%;
-webkit-animation: bounce 2.0s infinite ease-in-out;
animation: bounce 2.0s infinite ease-in-out;
}
.dot2 {
top: auto;
bottom: 0px;
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
@-webkit-keyframes bounce {
0%, 100% { -webkit-transform: scale(0.0) }
50% { -webkit-transform: scale(1.0) }
}
@keyframes bounce {
0%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 50% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
.spinner4 {
width: 30px;
height: 30px;
background-color: #fff;
-webkit-animation: rotateplane 1.2s infinite ease-in-out;
animation: rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
.spinner5 {
width: 32px;
height: 32px;
position: relative;
}
.cube1, .cube2 {
background-color: #fff;
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
-webkit-animation: cubemove 1.8s infinite ease-in-out;
animation: cubemove 1.8s infinite ease-in-out;
}
.cube2 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
@-webkit-keyframes cubemove {
25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
100% { -webkit-transform: rotate(-360deg) }
}
@keyframes cubemove {
25% {
transform: translateX(42px) rotate(-90deg) scale(0.5);
-webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
} 50% {
transform: translateX(42px) translateY(42px) rotate(-179deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
} 50.1% {
transform: translateX(42px) translateY(42px) rotate(-180deg);
-webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
} 75% {
transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
-webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
} 100% {
transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
}
}
.spinner6 {
width: 50px;
height: 30px;
text-align: center;
}
.spinner6 > div {
background-color: #fff;
height: 100%;
width: 6px;
margin-left:2px;
display: inline-block;
-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner6 .rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.spinner6 .rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.spinner6 .rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.spinner6 .rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
}
.spinner7 {
width: 90px;
height: 30px;
text-align: center;
}
.spinner7 > div {
background-color: #fff;
height: 15px;
width: 15px;
margin-left:3px;
border-radius: 50%;
display: inline-block;
-webkit-animation: stretchdelay 0.7s infinite ease-in-out;
animation: stretchdelay 0.7s infinite ease-in-out;
}
.spinner7 .circ2 {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
.spinner7 .circ3 {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
.spinner7 .circ4 {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
.spinner7 .circ5 {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s;
}
@-webkit-keyframes stretchdelay {
0%, 40%, 100% { -webkit-transform: translateY(-10px) }
20% { -webkit-transform: translateY(-20px) }
}
@keyframes stretchdelay {
0%, 40%, 100% {
transform: translateY(-10px);
-webkit-transform: translateY(-10px);
} 20% {
transform: translateY(-20px);
-webkit-transform: translateY(-20px);
}
}
下面让我们来使用一下该插件，试试它的简单方便 :
<!-- fakeLoader BEGIN -->
<link rel="stylesheet" type="text/css" href="fakeLoader.css">
<script type="text/javascript" src="fakeLoader.min.js"></script>
<div id="fakeLoader"></div>
<script type="text/javascript">
$('div#fakeLoader').fakeLoader({
timeToHide : 3000, //假加载的延时时长
bgColor : '#2fd0b5', //背景颜色
spinner : 'spinner3' //使用哪种预设动画,这里使用的是spinner3
});
</script>
<!-- fakeLoader END -->
当然别忘记在它之前引入jQuery文件哦，我一般使用 jQuery版本1.8.3 ;
分享给大家，希望大家能为移动WebApp添砖加瓦吧。
fakeLoader.js-针对WebApp中的 “假”预加载的更多相关文章
- js的 image 属性 和一个预加载模块
创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片. 图像对象: 建立图像对 ...
- 在Electron中最快速预加载脚本
背景 在Electron打开新窗口的时候,提前加载一段JavaScript脚本,以此内置一些属性或接口给被打开的页面.之所以要以注入方式,而不是页面自己引用,原因是不想麻烦页面自行引用,不想修改旧有的 ...
- 关于js与jquery中的文档加载
jquery中的$(document).ready()类似于javascript中的window.onload(),但是其中还是有很大区别的 1.jquery中的可以简化为$().ready(),$( ...
- 通过link的preload进行内容预加载
Preload 作为一个新的web标准,旨在提高性能和为web开发人员提供更细粒度的加载控制.Preload使开发者能够自定义资源的加载逻辑,且无需忍受基于脚本的资源加载器带来的性能损失. <l ...
- spine实现预加载(一)
前言 本文实现了spine动画的预加载,解决在战斗等大量加载spine动画的时候出现卡顿现象. 这里使用和修改三个类,直接修改的源码,当然你也可以继承LuaSkeletonAnimation,自己封装 ...
- viewpager和fragment预加载的解决
在使用Viewpager和fragment处理中会出现预加载的问题,最近看别人的代码,终于找到了一个很好的处理方法 能有效的解决预加载的问题,在fragment都继承一个重写setUserVisibl ...
- 使用new Image()进行预加载
概述 这篇博文记录了用new Image()进行预加载的总结,供以后开发时参考,相信对其他人也有用. 旧的预加载 一般我们为了让背景图更快的加载,我们常常把背景图放在一个display:none的im ...
- 11月26日 用seed，预加载种子文件； Case 条件语句。网址的参数如何传递,; Query--自定义scopes
在seed文件中输入一些预加载的种子job,注意属性和值都要有: ❌错误,我输入contact_email的时候value值是空的,这样不能正确生成. 正确✅: for i in 1..10 do ...
- 预加载与智能预加载（iOS）
来源:Draveness(@Draveness) 链接:http://www.jianshu.com/p/1519a5302141 前两次的分享分别介绍了 ASDK 对于渲染的优化以及 ASDK 中使 ...
随机推荐
- snowflake
snowflake在分布式系统中生成全局id
- [办公自动化]windows7 仿宋GB2312字体打印不对
今天同事发现自己的文档中,仿宋GB2312这种字体打印的看着总觉得不对. 他使用的操作系统是windows7,office 是2007. 解决方案: 将windows xp中的c:\windows\f ...
- unity HideInInspector与SerializeField
[HideInInspector]表示将原本显示在面板上的序列化值隐藏起来. [SerializeField]表示将原本不会被序列化的私有变量和保护变量可以序列化,这么他们在下次读取时,就是你上次赋值 ...
- Memcache技术分享：介绍、使用、存储、算法、优化、命中率
1.memcached 介绍 1.1 memcached 是什么? memcached 是以LiveJournal旗下Danga Interactive 公司的Brad Fitzpatric 为首开发 ...
- Supesite 参数说明
supesite有人看到的是强大的功能,我看到的是坑爷的一些用法,第一次看到block,我晕了.对于参数一头雾水,下面收集了一些,备用吧. supesite标签调用参数详解 参数: blocktype ...
- laravel paginate动态分页
1.router Route::get('product', function(){ $products = App\Product::paginate(10); return view('produ ...
- JS中基本window对象操作
---恢复内容开始--- 一.使用window中的属性时 window.属性,直接跟属性名.而调用window的函数时 window.hanshu(): 要在其函数名后面加括号. 二.windo ...
- 20145319 《java程序设计》课程总结
20145319 <Java程序设计>课程总结 读书笔记链接总结 - 20145319 第一周学习总结 - 20145319 第二周学习总结 - 20145319 第三周学习总结 - 20 ...
- js判断ie版本号
jQuery 2.0 去除了对浏览器版本号的判断(它推荐特性检测),这里是一个老外写的原生判断方法,这段代码着实巧妙!既简介.有向后兼容!一般做法都是:正则搜索 USER_AGENT :但因为历史原 ...
- yaf在windows7下32位的安装教程
首先下载php_yaf.dll文件http://pecl.php.net/package/yaf/2.2.9/windows 打开扩展extension=php_yaf.dll 然后下载工具 http ...