更新到v1.2

修复和优化UI问题，增加了debug参数。

CHANGE.md

@@ -0,0 +1,11 @@
+# 版本 v1.2   
+
+* 调整了动画显示的效果，在所有资源已经加载完成的情况下，进度条的退场时间提前，尽量不出现进度条界面。   
+* 解决了一个由于加载bootstrap的css引起的进度条抖动问题。 
+* 增加了 domloader.debug 参数，将其设置为false，可以停止在控制台显示加载过程。默认是true。  
+
+# 版本 v1.0   
+
+实现了最基本的功能：  
+* 加载html,js,css等资源文件，并根据这些文件显示真实进度条。   
+* 实现Logo的显示。   

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;
+```

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("<link async id=\"domloader_" + domloader.id + "\" rel=\"stylesheet\" href=\"" + path + "\" >\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,43 +54,50 @@ 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();
         }
     },
 
     init: function () {
         window.onload = function () {
+            $('head').append('<style>*, ::after, ::before {box-sizing: border-box;}</style>');
             $('body').append('<div id="domloader_loading_bg" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: white;z-index: 15000;"></div>');
             $('body').append('<div id="domloader_loading_show" style="color: black;;z-index: 15001;width: 200px; height: 200px;position: absolute; left: 0;top: 0;right: 0;bottom: 0; margin: auto;"></div>');
-            if(domloader.icon!==false){
-                $('#domloader_loading_show').append('<div style="text-align:center;margin-bottom:20px;"><img src="'+domloader.icon+'" /></div>');
+            if (domloader.icon !== false) {
+                $('#domloader_loading_show').append('<div style="text-align:center;margin-bottom:20px;"><img src="' + domloader.icon + '" style="vertical-align: middle;border-style: none;"/></div>');
             }
             $('#domloader_loading_show').append('<div class="progress round-conner"><div class="curRate round-conner"></div></div>');
-            $('#domloader_loading_show').append('<style>.progress {width: 200px;background: #ddd;}.curRate {width: 0%;background: #f30;}.round-conner {height: 10px;border-radius: 15px;}</style>');
-            console.log('Page ready.Domloader start.');
+            $('#domloader_loading_show').append('<style>.progress {width: 180px;background: #ddd;margin-right:auto;margin-left:auto;}.curRate {width: 0%;background: #f30;}.round-conner {height: 10px;border-radius: 15px;}</style>');
+            domloader.log('Page ready.Domloader start.');
             domloader.load();
         }
+    },
+
+    log: function (msg) {
+        if (this.debug) {
+            console.log(msg);
+        }
     }
-}
+}