loading插件(原创)
前言:服务器这几天都连不上,所以迟迟未更新,今天连上后才把插件文件和文档上传了。良心之作啊,难度虽不高,但命名多文件多啊。我得马上写篇博客絮叨一下,直接上地址。
文档及下载地址:www.chengguanhui.com/demos/loading-js/
1、简介
loading.js是本人近日开发的一款小插件,它主要是用于对图片进行预加载和展示多达28种的CSS3加载特效,非常小巧方便。这28个特效是网上收集回来的,为了在做小游戏或者写页面的时候使用更方便,我就把它做成了JS版本了。想要引入效果以及加载图片,现在一行代码就可以实现了。当然,这款插件很小,尚存在很多不足的地方,而且目前只支持较新的浏览器。但是千里之行,始于足下。我相信我正式工作以后会产出更多的好作品以及好博客的,望多多支持多多鼓励啊。
2、源码解释
首先创建loading对象以及存储28种特效类型的子div数量,后面就可以根据这组数据创建相应的结构了。
var loading = loading || {};
var types = {
"ball-pulse":3,
"ball-grid-pulse":9,
"ball-clip-rotate":1,
"ball-clip-rotate-pulse":2,
"square-spin":1,
"ball-clip-rotate-multiple":2,
"ball-pulse-rise":5,
"ball-rotate":1,
"cube-transition":2,
"ball-zig-zag":2,
"ball-zig-zag-deflect":2,
"ball-triangle-path":3,
"ball-scale":1,
"line-scale":5,
"line-scale-party":4,
"ball-scale-multiple":3,
"ball-pulse-sync":3,
"ball-beat":3,
"line-scale-pulse-out":5,
"line-scale-pulse-out-rapid":5,
"ball-scale-ripple":1,
"ball-scale-ripple-multiple":3,
"ball-spin-fade-loader":8,
"line-spin-fade-loader":8,
"triangle-skew-spin":1,
"pacman":5,
"ball-grid-beat":9,
"semi-circle-spin":1
};
以下就是整个插件函数的结构,赋了一些初值。
var small = "15px";
var normal = "25px";
var big = "40px";
(function(loading) {
var loaders = '<div class="loader"><div class="loader-inner ball-pulse"><div></div><div></div><div></div></div></div>';
//初始化动画
function _init () {
……
}
//预加载图片
function loadingFn(imgs,cbFn) {
……
}
//绑定
loading.init = _init; })(loading)
loading的_init()方法有序执行以下代码:
(1)此方法有三个参数,第一个必填,二三选填。当只有两个参数时,需要判断第二参数是设置项对象,还是回调函数。
var obj = arguments[0];
var ops = arguments[1];
var cbFn = null;
//第二参数为空则将其置为回调函数
if(typeof(ops)=="function"){
cbFn = ops;
}else if(arguments.length==3){
cbFn = arguments[2];
}
(2)由于实参1中设置的数量是不定的,所以将用户设置的值拷贝到ops2后再返回ops。有设置的值将被覆盖,没设置的启用预设值。
var ops2={
size:"",
fullscreen:false,
type:"ball-pulse",
color:"",
bgColor:"#ed5565",
imgs:[]
};
//将ops中设置的值赋ops2
for (var key in ops) {
ops2[key] = ops[key];
};
//重设
ops = ops2;
(3)根据第一参数获取元素,让用户可以写id名或直接写元素节点变量。接着判断用户设置的类型,如果不等于预设值则到types中调用数据,创建相应数量的div。然后拼接动画结构的div字符串以及将设置的type(即class名)赋给相应的div。
//获取ID
var target = document.getElementById(obj);
if(target==null || !target){//容错
target = obj;
}
//非默认类型
if(ops.type!="ball-pulse"){
var length = types[ops.type];
var str = "";
for(var i=0;i<length;i++){
str+="<div></div>";
}
str = '<div class="loader"><div class="loader-inner ' + ops.type + '">'+ str + "</div></div>";
loaders = str;
}
(4)如果设置为全屏模式,则给body新建一个子div,设置大小为全屏并定位到最前方。这时候target不再是用户给定id的元素,而是新建的div,最后再插入到target。
//全屏模式
if(ops.fullscreen){
var loadWrap = document.createElement("div");
loadWrap.style.position = "absolute";
loadWrap.style.width = "100%";
loadWrap.style.height = "100%";
loadWrap.style.left = 0;
loadWrap.style.top = 0;
loadWrap.style.zIndex = 10000;
document.body.appendChild(loadWrap);
target = loadWrap;
}
//插入
target.innerHTML = loaders;
(5)如果用户设置了参数则修改相应的样式,如颜色、大小和背景。包裹动画的容器是默认居中的。
//颜色和大小
var loader = target.children[0];
var divs = loader.children[0].getElementsByTagName("div");
for(var j=0;j<divs.length;j++){
if(ops.color!=""||ops.color.length!=0){
divs[j].style.backgroundColor = ops.color;
}
if(ops.size.length!=0){
divs[j].style.width = ops.size;
divs[j].style.height = ops.size;
}
}
//背景
if(ops.bgColor!=""||ops.bgColor.length>=0){
loader.style.backgroundColor = ops.bgColor;
}
//居中
loader.style.position = "absolute";
loader.style.top = "50%";
loader.style.left = "50%";
loader.style.marginLeft = -loader.offsetWidth/2 + "px";
loader.style.marginTop = -loader.offsetHeight/2 + "px";
(6)如果用户定义了图片数组则调用加载图片的函数,否则获取本页的所有img的资源地址,并调用加载函数加载本页所有图片。
//加载图片
if (ops.imgs.length>0) {
loadingFn(ops.imgs,cbFn);
}else{
//若空则加载页面所有img
var imgs = document.getElementsByTagName("img");
var srcs = [];
for(var i=0;i<imgs.length;i++){
srcs[i] = imgs[i].getAttribute("src");
}
loadingFn(srcs,cbFn);
}
加载图片函数结构如下,参数1为图片数组,若空则直接执行回调函数;参数2为回调函数,存在时才执行。
//预加载图片
function loadingFn(imgs,cbFn) {
var index = 0;
//若页面没有img
if(imgs.length==0){
cbFn && cbFn();
return;
}
for (var i = 0; i < imgs.length; i++) {
var img = new Image();
img.src = imgs[i];
img.onload = function () {
index++;
if (index == imgs.length) {
cbFn && cbFn();
};
}
};
}
3、示例
(1)默认简单版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入想要的动画-->
<link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>
<title>loading插件</title>
</head>
<body>
<!--指定动画容器-->
<div id="wrap"></div>
</body>
<!--引入loading.js-->
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//一句搞定
loading.init(wrap);
</script>
</html>
(2)自定义完整版
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--引入想要的动画-->
<link rel="stylesheet" type="text/css" href="css/ball-pulse.css"/>
<title>loading插件</title>
</head>
<body>
<!--指定动画容器-->
<div id="wrap"></div>
</body>
<!--引入loading.js-->
<script src="js/loading.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var wrap = document.getElementById("wrap");//可写可不写
var imgArr = ["img/p1.jpg","img/p2.jpg"];//需要加载的图片,若空则默认加载本页面图片
loading.init(wrap,{ //第一个参数写变量名或直接写"#wrap"均可
size:normal, //图形大小
type:"ball-pulse", //动画类型
color:"#fff", //图形颜色
bgColor:"#ed5565", //背景颜色
imgs:imgArr //加载图片数组
},function () { //回调函数
// wrap.style.display = "none";
})
</script>
</html>
好吧不多说了,快去看效果啦!
地址:www.chengguanhui.com/demos/loading-js/
说明:原创文章,转载时请注明出处,谢谢。
loading插件(原创)的更多相关文章
- 写一个Vue loading 插件
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...
- 【自己开发】Jquery的loading插件
经过几周的时间的开发.我的loading插件终于上线了.这个插件功能为客户提供正在等待的信息,提供优良用户体验效果. 先看效果. 原理我内部实现我不讲,特别简单. 我说调用方式和api. 首先引用jq ...
- #Plugin 环形loading插件
CircleLoader 环形loading插件 1.原生JS,不依赖jquery,zepto 2.前端学习交流群:814798690 案例展示 下载地址 https://github.com/cha ...
- JQuery+Bootstrap 自定义全屏Loading插件
/** * 自定义Loading插件 * @param {Object} config * { * content[加载显示文本], * time[自动关闭等待时间(ms)] * } * @param ...
- 自定义vue的loading插件
在一般的vue项目中,都会用到Loading或者Alert之类的弹窗浮层,而他们是一种比较高频率出现的组件. 一般情况下,我们都会去直接import该组件,然后直接以标签的形式引用进去当前页面组件中, ...
- 一个基于jQuery的移动端条件选择查询插件(原创)
下载插件 目前给出的下载是混淆了后的代码 愿意一起探讨的可以找我要源码 使用方式: var ConditionsChoose = $("#Screening").Condition ...
- 基于weui loading插件封装
<!-- Loading.vue --> <template> <div id="loadingToast" v-if="show" ...
- 基于Jquery的textarea滚动条插件(原创)
之前项目中自己写的滚动条插件.先前太忙没有好好整理.现在项目间歇期拿出来整理后贴出来 Demo Here css 我是把mCustomScrollbar 的UI 扣下来的. 这里我要介绍下这个插件不错 ...
- vue axios拦截器 + 自编写插件 实现全局 loading 效果;
项目需求:用自定义的 .gif 图标实现全局 loading 效果:为避免在每个页面手动添加,且简单高效的实现,经查阅资料,最终采用了 vue axios拦截器 + 自编写 loading 插件:下面 ...
随机推荐
- [Node.js] 闭包和高阶函数
原文地址:http://www.moye.me/2014/12/29/closure_higher-order-function/ 引子 最近发现一个问题:一部分写JS的人,其实对于函数式编程的概念并 ...
- [logstash-input-log4j]插件使用详解
Log4j插件可以通过log4j.jar获取Java日志,搭配Log4j的SocketAppender和SocketHubAppender使用,常用于简单的集群日志汇总. 最小化的配置 input { ...
- HTML标签理解
基础回顾 1:<!DOCTYPE HTML> 这个我们都不陌生,它是文档说明,在html页面的第一行就写的是这个.在 html5中只有一个,大小写不敏感.是便于浏览器识别文档类型. 2:& ...
- JAVA - 多线程 两种方法的比较
一.继承Thread类 实现方法: (1).首先定义一个类去继承Thread父类,重写父类中的run()方法.在run()方法中加入具体的任务代码或处理逻辑.(2).直接创建一个ThreadDemo2 ...
- 【原创】Kakfa metrics包源代码分析
这个包主要是与Kafka度量相关的. 一.KafkaTimer.scala 对代码块的运行进行计时.仅提供一个方法: timer——在运行传入函数f的同时为期计时 二.KafkaMetricsConf ...
- When using SqlDependency without providing an options value, SqlDependency.Start() must be called prior to execution of a command added to the SqlDependency instance.
在调试SignalR程序时,提示一个异常:When using SqlDependency without providing an options value, SqlDependency.Star ...
- JQuery 快速入门一篇通
JQuery是什么? JQuery 是一套JavaScript库, 使用它,可以很方便的进行 JavaScript的编程.比如: 获取页面元素, 修改页面元素的CSS样式等等都可以以很简单的语法完成. ...
- C#执行存储过程的简化
下面的方法是我在实际开发中摸索出来的,可以在很大程度上简化调用存储过程的代码. 首先来看一下C#调用存储过程的一般过程:1.打开数据库连接SqlConnection:2.生成一个SqlCommand: ...
- 关于JQuery
整理jq基础常用(过于基础别喷): 1, $('div input[name]').css('','');//获取层中有name属性的标签 $('div input[name=txtname]').c ...
- DOS 和 Linux 常用命令的对比
DOS 和 Linux 常用命令的对比 许多在 shell 提示下键入的 Linux命令都与你在 DOS 下键入的命令相似.事实上,某些命令完全相同. 本附录提供了 Windows的 DOS 提示下的 ...