Loading加载小插件,用户可以选择html格式或canvas格式,自定义loading图片,canvas色彩搭配可根据个人喜好
;(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色彩搭配可根据个人喜好的更多相关文章
- js滚动加载小插件
本文实例讲述了jquery滚动加载数据的方法.分享给大家供大家参考.具体分析如下: 少废话直接上代码!!!粗暴,直接,干脆 0//lk-2017-05-04 1(function($, win) { ...
- nopCommerce 3.9 大波浪系列 之 网页加载Widgets插件原理
一.插件简介 插件用于扩展nopCommerce的功能.nopCommerce有几种类型的插件如:支付.税率.配送方式.小部件等(接口如下图),更多插件可以访问nopCommerce官网. 我们看下后 ...
- jQuery Pjax – 页面无刷新加载,优化用户体验
pjax 是 HTML5 pushState 以及 Ajax 两项技术的简称,综合这两个技术可以实现在不刷新页面的情况下载入 HTML 到当前网页,带给你超快速的浏览器体验,而且有固定链接.标题以及后 ...
- [js开源组件开发]loading加载效果
loading加载效果 由于程序和网络的原因,常常我们需要在交互的时候,给用户一个正在加载中的动画,于是,loading组件横空出世.不需要复杂的代码,也能完成大多数业务,这就是我做组件的原则. 效果 ...
- vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
- 使用 JS 嵌入的方式来加载 Flash 插件,在各浏览器中播放视频
嵌入插件 使用 object 和 embed 标签 这种方法用到的是 Object 和 Embed 标签,可以看到 object 的很多参数和 embed 里面的很多属性是重复的.浏览器兼容性,有的浏 ...
- ajax请求完之前的loading加载
很多时候我们需要引入框架来开发项目,这时我们可能会遇到页面还没加载完源码出来了的问题,给用户一种不好的视觉体验,这是便需要loading加载了,来完善用户体验! /*loading.js*/ // 加 ...
- loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术 前端:HTML5+CSS3+JS+layer.js 后端:.net 2.遇 ...
- CEF加载FLASH插件时弹出CMD命令行窗口的问题
这个是flash插件的一个bug,CEF(chromium系列浏览器)关闭sandbox第一次加载flash插件就会跳出这样的一个提示,在Google官方也看到了chromium的issue: 解决方 ...
随机推荐
- Linux主机规划
当你想装linux操作系统的时候,一定要知道你的用途,不同的用途就要规划不同的装机方式. 首先要知道一些概念: 挂载:利用一个目录当成进入点,将磁盘分区的数据放置在该目录下. 磁盘第一个扇区记录的信息 ...
- js'中的apply和call和bind的用法
apply:方法能劫持另外一个对象的方法,继承另外一个对象的属性. Function.apply(obj,args)方法能接收两个参数obj:这个对象将代替Function类里this对象args:这 ...
- Openbox中指定目录打开程序
现在遇到这样的情况,在浏览器的下载中,点击在文件夹中显示, 结果这个使用系统调用的是Baobab,一款分析磁盘使用情况的软件,而不是使用目录浏览程序,例如nautilus 查询后知道,系统使用xdg- ...
- Objective-C文章中的生词
Objective-C http://rypress.com/tutorials/objective-c/index C Basics http://rypress.com/tutorials/ ...
- Java面试宝典系列之基础排序算法
本文就是介绍一些常见的排序算法.排序是一个非常常见的应用场景,很多时候,我们需要根据自己需要排序的数据类型,来自定义排序算法,但是,在这里,我们只介绍这些基础排序算法,包括:插入排序.选择排序.冒泡排 ...
- 170106、用9种办法解决 JS 闭包经典面试题之 for 循环取 i
闭包 1.正确的说,应该是指一个闭包域,每当声明了一个函数,它就产生了一个闭包域(可以解释为每个函数都有自己的函数栈),每个闭包域(Function 对象)都有一个 function scope(不是 ...
- C语言共用体(Union)
通过前面的讲解,我们知道结构体(Struct)是一种构造类型或复杂类型,它可以包含多个类型不同的成员.在C语言中,还有另外一种和结构体非常类似的语法,叫做共用体(Union),它的定义格式为: uni ...
- Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git小结(转)
摘要 出于兴趣,想要搭建一个自己的小站点,目前正在积极的准备环境,利用Spring+SpringMVC+MyBatis+LogBack+C3P0+Maven+Git,这里总结下最近遇到的一些问题及解决 ...
- 一个被称为世界上最短的判断IE方法
最近偶然看到一段判断是否为IE浏览器的代码: if(!+[1,]) { console.info("IE 浏览器"); } else { console.info("非 ...
- CountDownLatch和CyclicBarrier 举例详解
有时候会有这样的需求,多个线程同时工作,然后其中几个可以随意并发执行,但有一个线程需要等其他线程工作结束后,才能开始.举个例子,开启多个线程分块下载一个大文件,每个线程只下载固定的一截,最后由另外一个 ...