概述
domloader是一个模版加载小工具，帮助你简单地构建前后端分离的web前端程序。
无需太多复杂的学习成本，看完本页即可上手，甚至可以立即应用到你现有的项目。
你可以像使用其他混合html的后端语言一样，对你的前端项目文件进行模块化处理。
比如将页头和页脚与页面主体内容单独抽取出来，形成模块，批量应用到其他类似页面。
另外，domloader在加载时会显示一个进度界面。 进度界面会遮盖加载过程, 这类似于iOS上app启动界面机制。
因此可以缓解因网速慢，或者页面资源较多而导致显示不完全问题。
加载进度是真实的加载进度，并非模拟。
你可以到这里浏览domloader的实际应用。
同时也欢迎应用了domloader的作品在此展示。
目前已经实现的功能：
- 加载html，css以及js
- 可以设置一个加载进度界面的图标
- 加载时显示进度条
- 自动前缀修正，解决项目中的各种路径问题
- 回调设置，加载资源文件完成后执行回调
队列加载
为了确保页面功能不混乱，domloader会队列加载预设的内容（浏览器通常是并发加载页面资源）。
这种方式在首次访问时可能会稍微降低页面的加载速度，而在之后瞬间完成。
计划在后期优化加载速度以及动画效果。
包含
domloader的核心功能需要jQuery支持才能实现，因此在使用domloader时请务必加载jQuery。
用法
首先，建议先加载jQuery。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
然后，加载domloader。
<script src="domloader.js"></script> <link href="domloader.css" rel="stylesheet"/>
通常建议在页面的head部分加入domload的执行代码，以确保domloader可以优先运行。
domloader会在页面准备就绪时自动执行设定的加载指令。
domloader.init()
加载一个HTML块
domloader.html(dom,path); //参数dom指的是domloader该向哪个ID注入html块的内容。这是使用了jQuery的选择器。 //参数path指的是domloader从哪里获取html块。
举一个例子 下面的这段代码，会在页面就绪时，由domloader下载header.html的内容，并替换掉id=”head”的区块。
<html>
<head>
<title>domloader demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="domloader.js"></script>
<script>
domloader.init();
domloader.html('#head','/header.html');
</script>
</head>
<body>
<div id="head"></div>
</body>
</html>预加载文件 预加载功能优先于所有资源文件，会在页面加载后立即执行预加载功能，将代码插入到head后方。
所有预加载资源不会受到浏览器缓存的影响，均为无缓存（重点）。
因此预加载功能通常用来加载一些配置信息，比如定义了 version 参数的配置文件。
domloader.preload(path);
加载CSS和JS文件
对于CSS文件，domloader会按顺序将其插入到head的尾部，以外部样式表的方式。
而对于JS文件，domloader会按顺序下载好JS的内容后，以script标签内嵌的方式，将js内容插入到body的尾部。
domloader.css(path); domloader.js(path);
设置网站根目录
如果你要把整个前端项目放在子目录，那么这个设置可以确保正确加载资源。
一旦设置了此参数，每次加载时都会在地址前附加此参数。
domloader.root = 'https://yourwebsite.com/subdir/';
自动前缀修正
此功能需要配合设置网站根目录一起使用。 当通过 domloader.root 设置了网站根目录时，在任意含有 src 或 href 的元素中增加 data-dl-root 属性，并设置为 true时，这个元素的 src 或 href 属性的值，会在 domloader 加载资源文件完成时得到自动修正。
<script> domloader.root = 'https://yourwebsite.com/subdir/'; </script> <a data-dl-root="true" href="page/about.html">关于我们</a> <!--[下面的代码是自动前缀修正后的代码]--> <a data-dl-root="false" href="https://yourwebsite.com/subdir/page/about.html">关于我们</a>
设置资源文件版本号
可以解决由于浏览器缓存导致的资源更新不及时问题。
一旦设置了此参数，每次加载时都会在地址后附加此参数。
domloader.version = 'v1.0';
设置加载完成后的回调操作
有一些操作必须要在所有资源加载完成之后进行。
onload方法允许你设置一系列回调，将会在domloader加载完所有资源文件后启动这个回调。
domloader.onload(
function(){ xxx.xxx(); }
); 设置加载页面的icon
如果你不设置这个，那么在加载时只会显示进度条
domloader.icon = '/yourlogo.png';
显示控制台调试信息
domloader.debug 控制是否在控制台输出加载调试信息。默认是打开的，你可以设置为false来屏蔽这些信息。
domloader.debug = false;
