loading

14 | 15 | 16 | 17 |

18 |

这是个内容的例子

19 | 20 | 21 | js: 22 | 23 | //loading我自己 24 | $('#loading1').click(function(){ 25 | var load = new Loading(); 26 | load.init({ 27 | target: this 28 | }); 29 | load.start(); 30 | setTimeout(function() { 31 | load.stop(); 32 | }, 3000) 33 | }); 34 | //loading下面这个div 35 | $('#loading2').click(function(){ 36 | var load = new Loading(); 37 | load.init({ 38 | target: "#loading-content" 39 | }); 40 | load.start(); 41 | setTimeout(function() { 42 | load.stop(); 43 | }, 3000) 44 | }); 45 | //loading全屏 46 | $('#loading3').click(function(){ 47 | var load = new Loading(); 48 | load.init(); 49 | load.start(); 50 | setTimeout(function() { 51 | load.stop(); 52 | }, 30000) 53 | }); 54 | # API 55 | ## 属性 56 | ### target:string||dom 57 | 需要显示loading的节点，不传值时显示全屏的loading 58 | ## 方法 59 | ### start:function() 60 | 开始loading 61 | ### stop:function() 62 | 结束loading,这里会销毁loading节点 63 | ## 事件 64 | ### stop 65 | target的stop事件触发时，结束loading. 如 66 | $('html').trigger('stop')会结束全屏的loading动画. 67 | -------------------------------------------------------------------------------- /example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | loading 6 | 7 | 8 | 9 |

10 |

11 | 12 | 13 | 14 |

15 |

这是个内容的例子

16 |

17 | 18 | 19 | 52 | 53 | -------------------------------------------------------------------------------- /example/loading.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/loading/a542edf47412b3b1cb91858310587115ae342817/example/loading.jpg -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Created with Sublime Text 2. 3 | * license: http://www.lovewebgames.com/jsmodule/index.html 4 | * User: 田想兵 5 | * Date: 2015-04-27 6 | * Time: 15:15:51 7 | * Contact: 55342775@qq.com 8 | */ 9 | var gulp = require('gulp'), 10 | rjs = require('gulp-requirejs'), 11 | uglify = require('gulp-uglify'), 12 | cssmin = require('gulp-minify-css'), 13 | watchF = require('gulp-watch'); 14 | var paths = { 15 | script: 'src/*.js', 16 | css: 'src/*.css', 17 | img:'src/*.gif' 18 | }; 19 | gulp.task('js', function() { 20 | return gulp.src(paths.script).pipe(uglify()).pipe(gulp.dest('dist')); 21 | }); 22 | gulp.task('css', function() { 23 | return gulp.src(paths.css) 24 | .pipe(cssmin({ 25 | compatibility: 'ie8' 26 | })) //兼容ie 27 | .pipe(gulp.dest('dist')) 28 | .pipe(gulp.dest('dest')); 29 | }); 30 | gulp.task('img', function() { 31 | return gulp.src(paths.img) 32 | .pipe(gulp.dest('dist')) 33 | .pipe(gulp.dest('dest')); 34 | }); 35 | gulp.task('requirejs', function() { 36 | return rjs({ 37 | "name": "loading", 38 | "baseUrl": "src", 39 | "out": "loading.js", 40 | shim: { 41 | '$': { 42 | exports: '_' 43 | } 44 | }, 45 | "paths": { 46 | $:"jquery-1.11.2" 47 | }, 48 | exclude:["$"], 49 | //这里不打包zepto 50 | // map: { 51 | // "*": { 52 | // "$": "jquery-private" 53 | // }, 54 | // "jquery-private": {} 55 | // } 56 | // ... more require.js options 57 | }).pipe(uglify()) 58 | .pipe(gulp.src(['src/jquery-1.11.2.js', 'src/require.js']).pipe(uglify())) 59 | .pipe(gulp.dest('dest')); // pipe it to the output DIR 60 | }); 61 | gulp.task('watch',function(){ 62 | watchF(['src/*.*','html/*.*'],function(){ 63 | gulp.start('default') 64 | }); 65 | }); 66 | gulp.task('default', ['js', 'css','img']); -------------------------------------------------------------------------------- /http.js: -------------------------------------------------------------------------------- 1 | var PORT = 3003; 2 | 3 | var http = require('http'); 4 | var url=require('url'); 5 | var fs=require('fs'); 6 | var mine= { 7 | "css": "text/css", 8 | "gif": "image/gif", 9 | "html": "text/html", 10 | "ico": "image/x-icon", 11 | "jpeg": "image/jpeg", 12 | "jpg": "image/jpeg", 13 | "js": "text/javascript", 14 | "json": "application/json", 15 | "pdf": "application/pdf", 16 | "png": "image/png", 17 | "svg": "image/svg+xml", 18 | "swf": "application/x-shockwave-flash", 19 | "tiff": "image/tiff", 20 | "txt": "text/plain", 21 | "wav": "audio/x-wav", 22 | "wma": "audio/x-ms-wma", 23 | "wmv": "video/x-ms-wmv", 24 | "xml": "text/xml" 25 | }; 26 | var path=require('path'); 27 | function sleep(sleepTime) { 28 | for(var start = +new Date; +new Date - start <= sleepTime; ) { } 29 | } 30 | var server = http.createServer(function (request, response) { 31 | var pathname = url.parse(request.url).pathname; 32 | console.log(pathname) 33 | var realPath = pathname.substr(1);//path.join("assets", pathname); 34 | console.log(realPath); 35 | if(realPath =="ajax.json"){ 36 | sleep(3000); 37 | /* 38 | response.writeHead(500, { 39 | 'Content-Type': 'text/plain' 40 | }); 41 | */ 42 | response.write('{}'); 43 | response.end(); 44 | return; 45 | } 46 | var ext = path.extname(realPath); 47 | ext = ext ? ext.slice(1) : 'unknown'; 48 | fs.exists(realPath, function (exists) { 49 | if (!exists) { 50 | response.writeHead(404, { 51 | 'Content-Type': 'text/plain' 52 | }); 53 | 54 | response.write("This request URL " + pathname + " was not found on this server."); 55 | response.end(); 56 | } else { 57 | fs.readFile(realPath, "binary", function (err, file) { 58 | if (err) { 59 | response.writeHead(500, { 60 | 'Content-Type': 'text/plain' 61 | }); 62 | response.end(err); 63 | } else { 64 | var contentType = mine[ext] || "text/plain"; 65 | response.writeHead(200, { 66 | 'Content-Type': contentType 67 | }); 68 | response.write(file, "binary"); 69 | response.end(); 70 | } 71 | }); 72 | } 73 | }); 74 | }); 75 | server.listen(PORT); 76 | console.log("Server runing at port: " + PORT + "."); -------------------------------------------------------------------------------- /src/loading.css: -------------------------------------------------------------------------------- 1 | .ui-loading{position:absolute;left:0;top:0;z-index: 9999;} 2 | .ui-loading .ui-loading-mask{ position:absolute;top:0;left:0;background-color: #000;opacity: .2;z-index: 1} 3 | .ui-loading i{height: 90px;width:90px; display: block;background: url(loading.gif) no-repeat center center;background-size:100% 100%;position: absolute;z-index: 2} 4 | -------------------------------------------------------------------------------- /src/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tianxiangbing/loading/a542edf47412b3b1cb91858310587115ae342817/src/loading.gif -------------------------------------------------------------------------------- /src/loading.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Created with Sublime Text 3. 3 | * license: http://www.lovewebgames.com/jsmodule/index.html 4 | * github: https://github.com/tianxiangbing/loading 5 | * User: 田想兵 6 | * Date: 2015-08-05 7 | * Time: 11:27:55 8 | * Contact: 55342775@qq.com 9 | * desc:请尽量使用github上的代码，会修复一些问题，关注https://github.com/tianxiangbing/loading 10 | */ 11 | ; 12 | (function (root, factory) { 13 | //amd 14 | if (typeof define === 'function' && define.amd) { 15 | define(['jquery'], factory); 16 | } else if (typeof exports === 'object') { //umd 17 | module.exports = factory($); 18 | } else { 19 | root.Loading = factory(window.Zepto || window.jQuery || $); 20 | } 21 | })(window, function ($) { 22 | var Loading = function () { }; 23 | Loading.prototype = { 24 | loadingTpl: '

', 25 | stop: function () { 26 | this.loading.remove(); 27 | this.loading = null; 28 | }, 29 | start: function () { 30 | var _this = this; 31 | var loading = this.loading; 32 | if (!loading) { 33 | loading = $(_this.loadingTpl); 34 | $('body').append(loading); 35 | } 36 | this.loading = loading; 37 | //console.log(cw,ch) 38 | this.setPosition(); 39 | }, 40 | setPosition: function () { 41 | var _this = this; 42 | var loading = this.loading; 43 | var target = _this.target; 44 | var content = $(target); 45 | var ch = $(content).outerHeight(); 46 | var cw = $(content).outerWidth(); 47 | if ($(target)[0].tagName == "HTML") { 48 | ch = Math.max($(target).height(), $(window).height()); 49 | cw = Math.max($(target).width(), $(window).width()); 50 | } 51 | loading.height(ch).width(cw); 52 | loading.find('div').height(ch).width(cw); 53 | if (ch < 100) { 54 | loading.find('i').height(ch).width(ch); 55 | } 56 | var offset = $(content).offset(); 57 | loading.css({ 58 | top: offset.top, 59 | left: offset.left 60 | }); 61 | var icon = loading.find('i'); 62 | var h = ch, 63 | w = cw, 64 | top = 0, 65 | left = 0; 66 | if ($(target)[0].tagName == "HTML") { 67 | h = $(window).height(); 68 | w = $(window).width(); 69 | top = (h - icon.height()) / 2 + $(window).scrollTop(); 70 | left = (w - icon.width()) / 2 + $(window).scrollLeft(); 71 | } else { 72 | top = (h - icon.height()) / 2; 73 | left = (w - icon.width()) / 2; 74 | } 75 | icon.css({ 76 | top: top, 77 | left: left 78 | }) 79 | }, 80 | init: function (settings) { 81 | settings = settings || {}; 82 | this.loadingTpl = settings.loadingTpl || this.loadingTpl; 83 | this.target = settings.target || 'html'; 84 | this.bindEvent(); 85 | }, 86 | bindEvent: function () { 87 | var _this = this; 88 | $(this.target).on('stop', function () { 89 | _this.stop(); 90 | }); 91 | $(window).on('resize', function () { 92 | _this.loading && _this.setPosition(); 93 | }); 94 | } 95 | } 96 | return Loading; 97 | }); --------------------------------------------------------------------------------