├── images
├── demo.png
└── struct.png
├── README.md
├── .github
└── ISSUE_TEMPLATE
│ ├── feature_request.md
│ └── bug_report.md
├── CHANGE.md
├── domloader.css
├── README_CN.md
├── README_EN.md
├── domloader.js
└── LICENSE
/images/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmplink/domloader/HEAD/images/demo.png
--------------------------------------------------------------------------------
/images/struct.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/tmplink/domloader/HEAD/images/struct.png
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # [中文文档](https://github.com/tmplink/domloader/blob/master/README_CN.md)
2 | # [English manual](https://github.com/tmplink/domloader/blob/master/README_EN.md)
3 |
4 |
5 |
6 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Feature request
3 | about: Suggest an idea for this project
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Is your feature request related to a problem? Please describe.**
11 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
12 |
13 | **Describe the solution you'd like**
14 | A clear and concise description of what you want to happen.
15 |
16 | **Describe alternatives you've considered**
17 | A clear and concise description of any alternative solutions or features you've considered.
18 |
19 | **Additional context**
20 | Add any other context or screenshots about the feature request here.
21 |
--------------------------------------------------------------------------------
/CHANGE.md:
--------------------------------------------------------------------------------
1 | # 版本 v1.8
2 |
3 | * 优化了界面表现,通过添加一个CSS来让各种效果看起来更舒服。
4 | * 新增了预加载的功能。
5 |
6 | # 版本 v1.6
7 |
8 | * 新增了自动前缀修正功能。
9 |
10 | # 版本 v1.5
11 |
12 | * 修复进度条图层偏移的问题。
13 |
14 | # 版本 v1.4
15 |
16 | * 新增了 domloader.version 参数,此参数用于设置所有资源的版本信息,如果你的静态资源已经修改,但是浏览器极有可能缓存,那么通过这个参数来设置版本号可以很好地解决缓存的问题。
17 | * 新增了 domloader.onload 参数,此参数可以设置一系列回调(队列),当domloader完成所有资源加载时,执行此回调队列。
18 |
19 | # 版本 v1.3
20 |
21 | * 新增了 domloader.root 参数,此参数用于设置一个项目根目录地址,如果当前项目放置在子目录,那么请设置此参数,可以确保正确加载资源文件。
22 |
23 | # 版本 v1.2
24 |
25 | * 调整了动画显示的效果,在所有资源已经加载完成的情况下,进度条的退场时间提前,尽量不出现进度条界面。
26 | * 解决了一个由于加载bootstrap的css引起的进度条抖动问题。
27 | * 增加了 domloader.debug 参数,将其设置为false,可以停止在控制台显示加载过程。默认是true。
28 |
29 | # 版本 v1.0
30 |
31 | 实现了最基本的功能:
32 | * 加载html,js,css等资源文件,并根据这些文件显示真实进度条。
33 | * 实现Logo的显示。
--------------------------------------------------------------------------------
/domloader.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * domloader.css
3 | * v2.2
4 | * https://github.com/tmplink/domloader/
5 | *
6 | * Licensed GPLv3 © TMPLINK STUDIO
7 | */
8 | body{
9 | visibility:hidden;
10 | }
11 | #domloader_loading_bg{
12 | position: fixed;
13 | top: 0;
14 | left: 0;
15 | width: 100%;
16 | height: 100%;
17 | background: white;
18 | z-index: 15000;
19 | }
20 | #domloader_loading_show{
21 | color: black;
22 | z-index: 15001;
23 | width: 200px;
24 | height: 200px;
25 | position: absolute;
26 | left: 0;
27 | top: 0;
28 | right: 0;
29 | bottom: 0;
30 | margin: auto;
31 | display:none;
32 | text-align: center;
33 | }
34 | .domloader_progress {
35 | width: 180px;
36 | background: #ddd;
37 | margin-right:auto;
38 | margin-left:auto;
39 | }
40 | .domloader_curRate {
41 | width: 0%;
42 | background: #f30;
43 | }
44 | .domloader_round_conner {
45 | height: 10px;
46 | border-radius: 15px;
47 | }
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: Bug report
3 | about: Create a report to help us improve
4 | title: ''
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | **Describe the bug**
11 | A clear and concise description of what the bug is.
12 |
13 | **To Reproduce**
14 | Steps to reproduce the behavior:
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 |
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 |
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 |
26 | **Desktop (please complete the following information):**
27 | - OS: [e.g. iOS]
28 | - Browser [e.g. chrome, safari]
29 | - Version [e.g. 22]
30 |
31 | **Smartphone (please complete the following information):**
32 | - Device: [e.g. iPhone6]
33 | - OS: [e.g. iOS8.1]
34 | - Browser [e.g. stock browser, safari]
35 | - Version [e.g. 22]
36 |
37 | **Additional context**
38 | Add any other context about the problem here.
39 |
--------------------------------------------------------------------------------
/README_CN.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | # 概述
6 | domloader 帮助你构建一个模块化的纯前端项目,而无需用到 react 或者 vue.js 这类技术。
7 | 没有学习成本,不需要去学额外的语法,也不用编译,只需要用原生 js 就足够了。
8 |
9 | domloader 能做的事情很简单,你可以将页面中可重用的部分拆出来,并随时在其他页面重组。就像 PHP 的 include 那样!
10 |
11 | 你可以到这里浏览 domloader 的实际应用。
12 | 同时也欢迎应用了 domloader 的作品在此展示。
13 |
14 | * [TMP.link - 一个临时文件中转站](http://tmp.link)
15 | * [Bootstrap 4 简体中文文档](http://bs4.vx.link)
16 |
17 | 目前已经实现的功能:
18 | * 加载 html,css 以及 js
19 | * 可以设置一个加载进度界面的图标
20 | * 加载时显示进度条
21 | * 自动前缀修正,解决项目中的各种路径问题
22 | * 回调设置,加载资源文件完成后执行回调
23 |
24 |
25 |
26 |
27 |
28 | # 升级版本
29 | domloader 由一个 js 文件和一个 css 文件组成,合计约 12 kb。
30 | 每次升级版本,您只需要将最新版本的两个文件覆盖即可。
31 |
32 | # 队列加载
33 | 为了确保页面功能不混乱,domloader 会队列加载预设的内容(浏览器通常是并发加载页面资源)。
34 |
35 | # 包含
36 | domloader 的核心功能需要 jQuery 支持才能实现,因此在使用 domloader 时请务必加载 jQuery 。
37 |
38 | # 用法
39 | ## 首先,建议先加载 jQuery 。
40 |
41 | ```html
42 |
43 | ````
44 |
45 | ## 然后,加载 domloader 。
46 |
47 | ```html
48 |
49 |
50 | ````
51 |
52 | 通常建议在页面的head部分加入 domloader 的执行代码,以确保 domloader 可以优先运行。
53 | domloader会在页面准备就绪时自动执行设定的加载指令。
54 |
55 | ```javascript
56 | domloader.init()
57 | ```
58 |
59 | ## 加载一个 HTML 块
60 | ```javascript
61 | domloader.html(dom,path);
62 | //参数 dom 指的是 domloader 该向哪个 ID 注入 html 块的内容。这是使用了 jQuery 的选择器。
63 | //参数 path 指的是 domloader 从哪里获取 html 块。
64 | ```
65 | 举一个例子
66 | 下面的这段代码,会在页面就绪时,由 domloader 下载 header.html 的内容,并替换掉 d="head" 的区块。
67 | ```html
68 |
69 |
70 | domloader demo
71 |
72 |
73 |
77 |
78 |
79 |
80 |
81 |
82 | ```
83 |
84 | ## 预加载文件
85 | 预加载功能优先于所有资源文件,会在页面加载后立即执行预加载功能,将代码插入到 head 后方。
86 | 所有预加载资源不会受到浏览器缓存的影响,均为无缓存(重点)。
87 | 因此预加载功能通常用来加载一些配置信息,比如定义了 version 参数的配置文件。
88 | ```javascript
89 | domloader.preload(path);
90 | ```
91 |
92 | ## 加载CSS和JS文件
93 | 对于 CSS 文件,domloader 会按顺序将其插入到 head 的尾部,以外部样式表的方式。
94 | 而对于 JS 文件,domloader 会按顺序下载好 JS 的内容后,以 script 标签内嵌的方式,将 js 内容插入到 body 的尾部。
95 | ```javascript
96 | domloader.css(path);
97 | domloader.js(path);
98 | ```
99 |
100 | ## 设置网站根目录
101 | 如果你要把整个前端项目放在子目录,那么这个设置可以确保正确加载资源。
102 | 一旦设置了此参数,每次加载时都会在地址前附加此参数。
103 | ```javascript
104 | domloader.root = 'https://yourwebsite.com/subdir/';
105 | ```
106 |
107 | ## 自动前缀修正
108 | 此功能需要配合设置网站根目录一起使用。
109 | 当通过 domloader.root 设置了网站根目录时,在任意含有 src 或 href 的元素中增加 data-dl-root 属性,并设置为 true时,这个元素的 src 或 href 属性的值,会在 domloader 加载资源文件完成时得到自动修正。
110 | ```html
111 |
114 | 关于我们
115 |
116 | 关于我们
117 | ```
118 |
119 | ## 设置资源文件版本号
120 | 可以解决由于浏览器缓存导致的资源更新不及时问题。
121 | 一旦设置了此参数,每次加载时都会在地址后附加此参数。
122 | ```javascript
123 | domloader.version = 'v1.0';
124 | ```
125 |
126 | ## 设置加载完成后的回调操作
127 | 有一些操作必须要在所有资源加载完成之后进行。
128 | onload 方法允许你设置一系列回调,将会在 domloader 加载完所有资源文件后启动这个回调。
129 | ```javascript
130 | domloader.onload(
131 | function(){ xxx.xxx(); }
132 | );
133 | ```
134 |
135 | ## 设置加载页面的icon
136 | 如果你不设置这个,那么在加载时只会显示进度条
137 | ```javascript
138 | domloader.icon = '/yourlogo.png';
139 | ```
140 |
141 | ## 控制加载页面的进度条时间
142 | 此参数控制进度条动画总时间,即如果所有文件都为就绪状态,进度条跑完的时间。
143 | 默认值为 500 ms
144 | ```javascript
145 | domloader.animation_time = 500;
146 | ```
147 |
148 | ## 关闭进度条
149 | 此参数可以直接关闭进度条。
150 | 默认值为 true
151 | ```javascript
152 | domloader.animation = false;
153 | ```
154 |
155 | ## 显示控制台调试信息
156 | domloader.debug 控制是否在控制台输出加载调试信息。默认是打开的,你可以设置为false来屏蔽这些信息。
157 | ```javascript
158 | domloader.debug = false;
159 | ```
160 |
--------------------------------------------------------------------------------
/README_EN.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | # Introduction
6 | Domloader helps you build a modular, pure front-end project without the need for techniques such as react or vue.js.
7 | There is no learning cost, no need to learn additional grammar, no compilation, just use native js is enough.
8 |
9 | With domloader, you can take apart the reusable parts of the page and reorganize them on other pages at any time. Just like PHP's include!
10 |
11 | You can browse the applications built with domloader here.
12 | Also welcome applications built with domloader are shown here.
13 |
14 | * [TMP.link - temporary file transfer](http://tmp.link)
15 | * [Bootstrap 4 simplified chinese document](http://bs4.vx.link)
16 |
17 | Features:
18 | * Load html, css and js
19 | * Set an icon for loading progress
20 | * Show progress bar when loading
21 | * Autofixer, Solve path problems in projects
22 | * Callback function, perform callback after loading resource file
23 |
24 |
25 |
26 |
27 |
28 | # Upgrade
29 | The domloader consists of domloader.js and domloader.css , totaling about 12 kb.
30 | Each time you upgrade your version, you only need to overwrite the two files in the latest version.
31 |
32 | # Queue loading
33 | In order to ensure that the page function is not confusing, the domloader will queue the preset content (the browser usually loads the page resources concurrently).
34 | This method may slightly slow down the page loading time on the first visit, and then complete it in a short time.
35 | Plan to optimize loading speed later.
36 |
37 | # Requirements
38 | The core functionality of domloader requires jQuery support to be implemented, so be sure to load jQuery before using domloader.
39 |
40 | # Usage
41 | ## First, load jQuery.
42 |
43 | ```html
44 |
45 | ````
46 |
47 | ## Then,load domloader.
48 |
49 | ```html
50 |
51 |
52 | ````
53 |
54 | It is recommended to add the initialization code of domloader to the head of the page to ensure that the domloader can run first.
55 | The domloader will automatically execute the set load command when the page is ready.
56 |
57 | ```javascript
58 | domloader.init()
59 | ```
60 |
61 | ## Load an HTML file
62 |
63 | ```javascript
64 | domloader.html(dom,path);
65 | //The parameter dom refers to the content to which the domloader injects the html block. A jQuery selector was used.
66 | //The parameter path refers to where the domloader gets the html file.
67 | ```
68 | example:
69 | The following code will download the contents of header.html when the page is ready, and replace the block with id="head".
70 |
71 | ```html
72 |
73 | "head"
74 | domloader demo
75 |
76 |
77 |
81 |
82 |
83 |
84 |
85 |