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 中使 ...
随机推荐
- Scrum会议3
组名称:天天向上 项目名称:连连看 参会成员:王森(Master)张金生 张政 栾骄阳 时间:2016.10.18 已完成内容: 1.GUI布局设计 2.通过在网上大量阅览代码,大体了解连连看游戏制作 ...
- POJ 2528 Mayor's posters（线段树区间染色+离散化或倒序更新）
Mayor's posters Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 59239 Accepted: 17157 ...
- XML基础知识
1.XML:(entension mark language) 可扩展的标记语言格式化的文本文件html(Hype Text Mark Language)(超文本标记语言)主要用于显示2.特点 一个良 ...
- 算法与数据结构题目的 PHP 实现：栈和队列 设计一个有 getMin 功能的栈
刚入手了一本<程序员代码面试指南>,书中题目的代码都是 Java 实现的,琢磨着把这些代码用 PHP 敲一遍,加深印象. 题目:设计一个有 getMin 功能的栈 —— 实现一个特殊的栈, ...
- NetBeans 8.0 连接远程服务器
step: ① 新建项目 -- PHP -- 来自远程服务器的 PHP 应用程序 -- 下一步 ② 名称和位置 项目名称:自己取: 源文件夹:通过 “浏览” 选择本地项目文件夹.注意文件夹内不能有 n ...
- HTML: 用表格畫出課程表
這個知識點,常常被我忽略,而且誤解(其實不是我誤解),曾經一個公司的要求:不使用table,一律用div,即使是整齊的,能夠使用table輕鬆佈局出的樣式,也一定要用div. 可能這傢伙沒搞清楚,ta ...
- Arrays.toString Arrays.asList
import java.util.Arrays; public class TestCalc{ public static void main(String[] args) { ,,,,,,,}; / ...
- Python学习笔记——1——基础知识
1.1.变量和算法 python语言很类似人类语言,变量不需要定义类型.比如: 整型 字符串类型 数组 Java int a=12 String s="test" String[] ...
- ::after,::before使用
::after,::before使用 1.:before 选择器在被选元素的内容前面插入内容. 请使用 content 属性来指定要插入的内容. <!DOCTYPE html> < ...
- 【VC6】【集成工具】将输入信息集成到VC工具中
1.首先写一个工具,可以接受外部参数, 并且输入格式必须是固定的“"%s(%d):\n", __FILE__, __LINE__”形式. 2.编译生成EXE准备进行使用: 3.在V ...