From 1d3ee140cd4d9e25f43ce106cb77d756ec65aedb Mon Sep 17 00:00:00 2001
From: tmplink <45227137+tmplink@users.noreply.github.com>
Date: Mon, 24 Dec 2018 12:06:54 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=88=B0=201.8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

新增功能，调整UI。
---
 CHANGE.md     |  5 +++
 README.md     | 12 ++++++-
 domloader.css | 46 +++++++++++++++++++++++++
 domloader.js  | 95 ++++++++++++++++++++++++++++++++++-----------------
 4 files changed, 126 insertions(+), 32 deletions(-)
 create mode 100644 domloader.css

diff --git a/CHANGE.md b/CHANGE.md
index eb3614e..6022a96 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -1,3 +1,8 @@
+# 版本 v1.8
+
+* 优化了界面表现，通过添加一个CSS来让各种效果看起来更舒服。
+* 新增了预加载的功能。
+
 # 版本 v1.6
 
 * 新增了自动前缀修正功能。
diff --git a/README.md b/README.md
index b227f4f..52c038a 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,8 @@ domloader是一个模版加载小工具，帮助你简单地构建前后端分
 你可以到这里浏览domloader的实际应用。  
 同时也欢迎应用了domloader的作品在此展示。  
 
-[TMP.link - 一个临时文件中转站](http://tmp.link) 
+* [TMP.link - 一个临时文件中转站](http://tmp.link)   
+* [Bootstrap 4 简体中文文档](http://bs4.vx.link) 
 
 目前已经实现的功能：
 * 加载html，css以及js
@@ -48,6 +49,7 @@ domloader的核心功能需要jQuery支持才能实现，因此在使用domloade
 
 ```html
 <script src="domloader.js"></script>
+<link href="domloader.css" rel="stylesheet"/>
 ````
 
 通常建议在页面的head部分加入domload的执行代码，以确保domloader可以优先运行。  
@@ -82,6 +84,14 @@ domloader.html(dom,path);
 </html>
 ```
 
+预加载文件
+预加载功能优先于所有资源文件，会在页面加载后立即执行预加载功能，将代码插入到head后方。  
+所有预加载资源不会受到浏览器缓存的影响，均为无缓存（重点）。  
+因此预加载功能通常用来加载一些配置信息，比如定义了 version 参数的配置文件。
+```javascript
+domloader.preload(path);
+```
+
 加载CSS和JS文件  
 对于CSS文件，domloader会按顺序将其插入到head的尾部，以外部样式表的方式。  
 而对于JS文件，domloader会按顺序下载好JS的内容后，以script标签内嵌的方式，将js内容插入到body的尾部。   
diff --git a/domloader.css b/domloader.css
new file mode 100644
index 0000000..a5ac53a
--- /dev/null
+++ b/domloader.css
@@ -0,0 +1,46 @@
+/*!
+ * domloader.css
+ * v1.8
+ * https://github.com/tmplink/domloader/
+ * 
+ * Licensed GPLv3 © TMPLINK STUDIO
+ */
+body{
+    display:none;
+}
+#domloader_loading_bg{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: white;
+    z-index: 15000;
+}
+#domloader_loading_show{
+    color: black;
+    z-index: 15001;
+    width: 200px; 
+    height: 200px;
+    position: absolute; 
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0; 
+    margin: auto;
+    display:none;
+}
+.domloader_progress {
+    width: 180px;
+    background: #ddd;
+    margin-right:auto;
+    margin-left:auto;
+}
+.domloader_curRate {
+    width: 0%;
+    background: #f30;
+}
+.domloader_round_conner {
+    height: 10px;
+    border-radius: 15px;
+}
\ No newline at end of file
diff --git a/domloader.js b/domloader.js
index 5394799..0c33d6b 100644
--- a/domloader.js
+++ b/domloader.js
@@ -1,6 +1,6 @@
 /*!
  * domloader.js
- * v1.6
+ * v1.8
  * https://github.com/tmplink/domloader/
  * 
  * Licensed GPLv3 © TMPLINK STUDIO
@@ -8,7 +8,9 @@
 
 var domloader = {
     queue: [],
-    after_queue: [],
+    queue_after: [],
+    queue_preload: [],
+    loading_page: false,
     version: 0,
     progressbar: true,
     total: 0,
@@ -30,12 +32,25 @@ var domloader = {
         );
     },
 
+    preload: function (path) {
+        domloader.id++;
+        domloader.log('Preload::' + path);
+        domloader.queue_preload.push(
+                function () {
+                    $.get(domloader.root + path, {v: Date.now()}, function (response) {
+                        $('head').append(response);
+                        domloader.load(path);
+                    }, 'text');
+                }
+        );
+    },
+
     css: function (path) {
         domloader.log('Include::CSS::' + path);
         domloader.queue.push(
                 function () {
                     domloader.id++;
-                    $('head').append("<link async id=\"domloader_" + domloader.id + "\" rel=\"stylesheet\" href=\"" + domloader.root + path + "\" >\n");
+                    $('head').append("<link async id=\"domloader_" + domloader.id + "\" rel=\"stylesheet\" href=\"" + domloader.root + path + '?version=' + domloader.version + "\" >\n");
                     $('#domloader_' + domloader.id).ready(function () {
                         domloader.load(path);
                     });
@@ -57,13 +72,20 @@ var domloader = {
     },
 
     load: function (src) {
-        $('body').css('overflow', 'hidden');
+        if (domloader.queue_preload.length !== 0) {
+            var fn = domloader.queue_preload.shift();
+            if (typeof (fn) === 'function') {
+                fn();
+            }
+            return false;
+        } else {
+            this.init_loading_page();
+        }
         if (domloader.queue.length === 0) {
-
-            if (domloader.after_queue.length !== 0) {
+            if (domloader.queue_after.length !== 0) {
                 var cb = null;
-                for (cb in domloader.after_queue) {
-                    domloader.after_queue[cb]();
+                for (cb in domloader.queue_after) {
+                    domloader.queue_after[cb]();
                 }
             }
 
@@ -83,7 +105,7 @@ var domloader = {
         }
         if (typeof (src) !== 'undefined') {
             var percent = Math.ceil((this.total - this.queue.length) / this.total * 100);
-            $('.curRate').animate({'width': percent + '%'}, 100);
+            $('.domloader_curRate').animate({'width': percent + '%'}, 100);
             domloader.log("Loaded::" + src);
         }
         var fn = domloader.queue.shift();
@@ -93,43 +115,54 @@ var domloader = {
     },
 
     onload: function (cb) {
-        domloader.log('Add::OnLoad ballback');
-        domloader.after_queue.push(cb);
+        domloader.log('Add::OnLoad callback');
+        domloader.queue_after.push(cb);
     },
-    
-    autofix: function(){
-        if(domloader.root!==''){
-            $('[data-dl-root]').each(function(){
+
+    autofix: function () {
+        if (domloader.root !== '') {
+            $('[data-dl-root]').each(function () {
                 var autofixer = $(this).attr("data-dl-root");
-                var src       = $(this).attr("src");
-                var href      = $(this).attr("href");
-                if(autofixer==='true'&& src !== undefined && src !== null){
-                    $(this).attr("src",domloader.root + src);
-                    $(this).attr("data-dl-root",'false');
+                var src = $(this).attr("src");
+                var href = $(this).attr("href");
+                if (autofixer === 'true' && src !== undefined && src !== null) {
+                    $(this).attr("src", domloader.root + src);
+                    $(this).attr("data-dl-root", 'false');
                 }
-                if(autofixer==='true'&& href !== undefined && href !== null){
-                    $(this).attr("href",domloader.root + href);
-                    $(this).attr("data-dl-root",'false');
+                if (autofixer === 'true' && href !== undefined && href !== null) {
+                    $(this).attr("href", domloader.root + href);
+                    $(this).attr("data-dl-root", 'false');
                 }
             });
         }
     },
 
     init: function () {
+        $('body').ready(function(){
+            $('body').css('overflow', 'hidden');
+            $('body').append('<div id="domloader_loading_bg"></div>');
+        });
         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>');
-            $('#domloader_loading_bg').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 + '" style="vertical-align: middle;border-style: none;width:129px;height:129px;"/></div>');
-            }
-            $('#domloader_loading_show').append('<div class="progress round-conner"><div class="curRate round-conner"></div></div>');
-            $('#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();
         };
     },
 
+    init_loading_page: function () {
+        if (this.loading_page === false) {
+            $('#domloader_loading_bg').append('<div id="domloader_loading_show"></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;width:129px;height:129px;"/></div>');
+            }
+            $('#domloader_loading_show').append('<div class="domloader_progress domloader_round_conner"><div class="domloader_curRate domloader_round_conner"></div></div>');
+            $('body').show();
+            $('#domloader_loading_show').fadeIn(500);
+            this.loading_page = true;
+        } else {
+            return false;
+        }
+    },
+
     log: function (msg) {
         if (this.debug) {
             console.log(msg);