diff --git a/CHANGE.md b/CHANGE.md new file mode 100644 index 0000000..e014d98 --- /dev/null +++ b/CHANGE.md @@ -0,0 +1,11 @@ +# 版本 v1.2 + +* 调整了动画显示的效果,在所有资源已经加载完成的情况下,进度条的退场时间提前,尽量不出现进度条界面。 +* 解决了一个由于加载bootstrap的css引起的进度条抖动问题。 +* 增加了 domloader.debug 参数,将其设置为false,可以停止在控制台显示加载过程。默认是true。 + +# 版本 v1.0 + +实现了最基本的功能: +* 加载html,js,css等资源文件,并根据这些文件显示真实进度条。 +* 实现Logo的显示。 \ No newline at end of file diff --git a/README.md b/README.md index 94f96d6..1bda8e8 100644 --- a/README.md +++ b/README.md @@ -3,11 +3,13 @@ domloader是一个模版加载对象。 你可以像使用其他混合html的后端语言一样,对你的前端项目文件进行模块化处理。 比如将页头和页脚与页面主体内容单独抽取出来,形成模块,批量应用到其他类似页面。 -另外,domloader在加载时会显示一个进度界面,这可以缓解因网速慢,或者页面资源较多而导致显示不完全问题。 -是的没错,用进度界面遮起来(这类似于iOS上某些app启动时的界面机制)。 +另外,domloader在加载时会显示一个进度界面。 +进度界面会遮盖加载过程, 这类似于iOS上app启动界面机制。 +因此可以缓解因网速慢,或者页面资源较多而导致显示不完全问题。 加载进度是真实的加载进度,并非模拟。 -我们已经率先在我们的项目上应用了domloader,你可以到这里浏览domloader的实际应用。 +你可以到这里浏览domloader的实际应用。 +同时也欢迎应用了domloader的作品在此展示。 [TMP.link - 一个临时文件中转站](http://tmp.link) 目前已经实现的功能: @@ -85,3 +87,9 @@ domloader.js(path); ```javascript domloader.icon = '/yourlogo.png'; ``` + +显示控制台调试信息 +domloader.debug 控制是否在控制台输出加载调试信息。默认是打开的,你可以设置为false来屏蔽这些信息。 +```javascript +domloader.debug = false; +``` diff --git a/domloader.js b/domloader.js index b86b551..dcd2168 100644 --- a/domloader.js +++ b/domloader.js @@ -1,6 +1,6 @@ /*! * domloader.js - * v1.1 + * v1.2 * https://github.com/tmplink/domloader/ * * Licensed GPLv3 © TMPLINK STUDIO @@ -9,14 +9,15 @@ var domloader = { queue: [], progressbar: true, - total:0, - icon : false, + total: 0, + icon: false, id: 1, + debug: true, html: function (dom, path) { - this.id++; - console.log('Include::HTML::' + path); - this.queue.push( + domloader.id++; + domloader.log('Include::HTML::' + path); + domloader.queue.push( function () { $.get(path, function (response) { $(dom).replaceWith(response); @@ -27,8 +28,8 @@ var domloader = { }, css: function (path) { - console.log('Include::CSS::' + path); - this.queue.push( + domloader.log('Include::CSS::' + path); + domloader.queue.push( function () { domloader.id++; $('head').append("\n"); @@ -40,8 +41,8 @@ var domloader = { }, js: function (path) { - console.log('Include::JS::' + path); - this.queue.push( + domloader.log('Include::JS::' + path); + domloader.queue.push( function () { $.get(path, function (response) { domloader.id++; @@ -53,27 +54,27 @@ var domloader = { }, load: function (src) { - if (typeof (src) !== 'undefined') { - var percent = Math.ceil((this.total-this.queue.length)/this.total*100); - $('.curRate').animate({'width': percent+'%'},"fast"); - console.log("Loaded::" + src); - } - if (this.queue.length === 0) { - if (this.progressbar === false) { - $('body').css('overflow',''); - $('#domloader_loading_bg').fadeOut(); - $('#domloader_loading_show').fadeOut(); + $('body').css('overflow', 'hidden'); + if (domloader.queue.length === 0) { + if (domloader.progressbar === false) { + $('#domloader_loading_show').fadeOut(100); + $('#domloader_loading_bg').fadeOut(100); + $('body').css('overflow', ''); } } else { - if (this.progressbar) { - this.total = this.queue.length; - this.progressbar = false; - $('body').css('overflow','hidden'); + if (domloader.progressbar) { + domloader.total = domloader.queue.length; + domloader.progressbar = false; $('#domloader_loading_bg').show(); $('#domloader_loading_show').show(); } } - var fn = this.queue.shift(); + if (typeof (src) !== 'undefined') { + var percent = Math.ceil((this.total - this.queue.length) / this.total * 100); + $('.curRate').animate({'width': percent + '%'}, 100); + domloader.log("Loaded::" + src); + } + var fn = domloader.queue.shift(); if (typeof (fn) === 'function') { fn(); } @@ -81,15 +82,22 @@ var domloader = { init: function () { window.onload = function () { + $('head').append(''); $('body').append('
'); $('body').append(''); - if(domloader.icon!==false){ - $('#domloader_loading_show').append(''); + if (domloader.icon !== false) { + $('#domloader_loading_show').append(''); } $('#domloader_loading_show').append('