;(function($) {
$.Loading = function(options) {
//暴漏插件默认值
$.Loading.defaults = {
speed: 200, //弹出层淡出速度
bgcolor: 'rgba(0,0,0,.7)', //遮罩层颜色,需要rgba格式,默认黑色0.5透明度
type: "html", //默认html样式,也可以是canvas
msg: '正在加载...', //默认加载信息
loadPicNum: 2, //为html时loading图片哪一种;
canvassupport: false, //是否支持html5 canvas
Loadtimer: 3000, //遮罩层隐藏时间 ,只有在html格式下有效
autoHide: false, //是否自动隐藏
random: false, //是否随机loading图片,只有在html格式下有效
callback: function() {}, //默认回调函数
canvasFillColor: "#009600", //默认canvas填充色
canvasbackColor: "#ccc", //默认canvas底色
canvasFontColor: "red" //默认canvas字体色
};
var opts = $.extend({}, $.Loading.defaults, options);;
(function() {
if (window.applicationCache) {
canvassupport = true;
} else {
canvassupport = false;
}
if (opts.type && opts.type === "html") {
pageRender("html");
};
if (opts.type && opts.type === "canvas") {
if (canvassupport) {
pageRender("canvas");
} else {
pageRender("html");
}
}
})();

function pageRender(type) {
var html = '';
html += '<div class="loadingbox">';

if (type === "html") {
if (!!opts.random) {
opts.loadPicNum = Math.ceil(Math.random() * 53);
}
html += '<div class="topPart"><img src="loading/loading' + opts.loadPicNum + '.gif" /></div>'
};
if (type === "canvas") {
html += '<div class="topPart"><canvas id="mycanvas"></canvas></div>';
}
html += '<p class="font">' + opts.msg + '</p>';
html += '</div>';

var img = new Image();
img.onload = function() {
if ($(".loadingbox").length > 0) {
$(".loadingbox").remove();
}
$('body').append(html);
renderStyle(type);
}
img.src = "loading/loading" + opts.loadPicNum + ".gif";
};

function renderStyle(type) {
var iw = document.documentElement.clientWidth || document.body.clientWidth;
var loadBixW = iw > 320 ? 200 : 160;
var picH = $('.topPart').height() > 90 ? 100 : $('.topPart').height();
var ml = (iw - loadBixW) / 2;

$('.loadingbox').css({
width: loadBixW + "px",
zIndex: '999999',
position: 'fixed',
background: opts.bgcolor,
borderRadius: '15px',
cursor: 'pointer',
left: ml + 'px',
top: "20%"
});
$('.font').css({
textAlign: "center",
fontSize: '16px',
color: '#fff',
margin: "5px 0 10px 0"
});
$('.topPart').css({
width: "100%",
textAlign: "center",
paddingTop: '10px'
});
if (type === "html") {

if (picH < 70 && picH > 0) {
$('.topPart').find('img').css({
maxWidth: "100%",
padding: "20px 0"
});
}
if (picH >= 90) {
$('.topPart').find('img').css({
maxWidth: "100%",
height: picH + "px"
});
}
if (opts.autoHide)
setTimeout(function() {
closeLoading(opts.callback);
}, opts.Loadtimer);
}
if (type === "canvas") {
var canvas = document.getElementById('mycanvas');
canvas.width = 120;
canvas.height = 120;
if (canvas.getContext) {
var cxt = canvas.getContext('2d'),
W = canvas.width,
H = canvas.height,
deg = 0,
new_deg = 0,
diff = 0,
loop,
reloop,
text,
text_w;

function init() {

cxt.clearRect(0, 0, W, H);
cxt.beginPath();
cxt.strokeStyle = opts.canvasbackColor;
cxt.lineWidth = 5;
cxt.arc(W / 2, H / 2, 50, 0, Math.PI * 2, false);
cxt.stroke();

var r = deg * Math.PI / 180;
cxt.beginPath();
cxt.strokeStyle = opts.canvasFillColor;
cxt.lineWidth = 5;
cxt.arc(W / 2, H / 2, 50, 0 - 90 * Math.PI / 180, r - Math.PI * 90 / 180, false);
cxt.stroke();

cxt.fillStyle = opts.canvasFontColor;
cxt.font = "25px Arial";
text = Math.floor(deg / 360 * 100) + "%";
text_w = cxt.measureText(text).width;
cxt.fillText(text, W / 2 - text_w / 2, H / 2 + 10);
};

function draw() {
new_deg = 360;
diff = new_deg - deg;
loop = setInterval(to, 5000 / diff);

};

function to() {
if (deg == new_deg) {
clearInterval(loop);
if (opts.autoHide) closeLoading(opts.callback);

}
if (deg < new_deg) {
deg++;
}
init();
}
draw();

}
}

};

function closeLoading(callback) {
$('.loadingbox:visible').fadeOut(opts.speed);
if (typeof callback === "function") {
callback();
}
};
};
})(jQuery);

demo:

$.Loading({
type:"html",
speed:200,
loadPicNum:9,
autoHide:false,
bgcolor:'#666666'
});

Loading加载小插件,用户可以选择html格式或canvas格式,自定义loading图片,canvas色彩搭配可根据个人喜好的更多相关文章

  1. js滚动加载小插件

    本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...

  2. nopCommerce 3.9 大波浪系列 之 网页加载Widgets插件原理

    一.插件简介 插件用于扩展nopCommerce的功能.nopCommerce有几种类型的插件如:支付.税率.配送方式.小部件等(接口如下图),更多插件可以访问nopCommerce官网. 我们看下后 ...

  3. jQuery Pjax – 页面无刷新加载,优化用户体验

    pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...

  4. [js开源组件开发]loading加载效果

    loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...

  5. vue+elementUI+axios实现的全局loading加载动画

    在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...

  6. 使用 JS 嵌入的方式来加载 Flash 插件,在各浏览器中播放视频

    嵌入插件 使用 object 和 embed 标签 这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的.浏览器兼容性,有的浏 ...

  7. ajax请求完之前的loading加载

    很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验! /*loading.js*/ // 加 ...

  8. loading加载和layer.js

    layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...

  9. CEF加载FLASH插件时弹出CMD命令行窗口的问题

    这个是flash插件的一个bug,CEF(chromium系列浏览器)关闭sandbox第一次加载flash插件就会跳出这样的一个提示,在Google官方也看到了chromium的issue: 解决方 ...

随机推荐

  1. 利用git+hugo+markdown 搭建一个静态网站

    利用git+hugo+markdown 搭建一个静态网站 一直想要有一个自己的文档管理系统: 可以很方便书写,而且相应的文档很容易被分享 很方便的存储.管理.历史记录 比较方面的浏览和查询 第一点用M ...

  2. C# WinForm开发系列 - DataGridView

    1.DataGridView实现课程表 testcontrol.rar 2.DataGridView二维表头及单元格合并 DataGridView单元格合并和二维表头.rar myMultiColHe ...

  3. java 线程 障碍器

    package de.bvb; import java.util.concurrent.CyclicBarrier; import java.util.concurrent.TimeUnit; /** ...

  4. centos7配置静态ip后仍然显示动态ip

    我在虚拟机上安装了CentOS7操作系统,将 /etc/sysconfig/network-scripts/ifcfg-eth0 文件配置静态 IP 为192.168.1.210,如图1: 然后我用 ...

  5. JAVA泛型详解2 转载

    转载地址:http://www.cnblogs.com/sunwei2012/archive/2010/10/08/1845938.html 普通泛型 class Point<T>{ // ...

  6. oracle wrapped 代码解密工具 unwraper

    Oracle中的Wrap 功能是为了不让别人看到函数/存储过程的SQL源码的明文, 作为技术宅,有的时候想看源码但是看不到的那种心情是可以理解的, 发一个简单易用的 Oracle wrapped 解码 ...

  7. TRUNCATE TABLE (Transact-SQL)

    删除表中的所有行,而不记录单个行删除操作. TRUNCATE TABLE 与没有 WHERE 子句的 DELETE 语句类似:但是,TRUNCATE TABLE 速度更快,使用的系统资源和事务日志资源 ...

  8. 第1章 Sass简介

    什么是 CSS 预处理器? 定义: CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言 ...

  9. Git使用指南(3)—— 使用Git命令

    暂存区替换掉工作区 git init git init newrepo 克隆仓库 git clone git clone <repo> git clone <repo> < ...

  10. 对线程等待函数pthread_join二级指针参数分析

    分析之前先搞明白,这个二级指针其实在函数内部是承接了上个线程的返回值. 看man手册,发现返回值是个普通指针.人家用二级指针来承接,可能准备干大事.这个可以自己搜索一下.原因嘛,二级指针是保存了这个地 ...