head.js 小型網(wǎng)站并行動(dòng)態(tài)加載JS利器 (js文件加載器)

head.js 小型網(wǎng)站并行動(dòng)態(tài)加載JS利器 (js文件加載器)

head.js   ——   The only script in your HEAD   讓head標簽中僅有一個(gè)script標簽

快速加載JS和css文件

通常情況下JS兩大特性 1. 載入后馬上執行  2. 執行時(shí)會(huì )阻塞頁(yè)面后續的內容 3. 串行加載 按順序加載，所以每個(gè)JS有加載時(shí)間，所以JS越多加載的時(shí)間越長(cháng)，如果采用并行加載也叫異步加載并行執行（就是所有JS文件同時(shí)加載）的話(huà)，JS加載速度能提高差不多一倍，headjs就是并行加載的方式來(lái)提高網(wǎng)站JS的加載速度，并且headjs提供了緩存機制，加載的文件可以被緩存，加載但不執行，僅當在我們想要執行的時(shí)候執行。
headjs的用法：

1.  head.js('a.js')  異步加載js

2.  head.js("a.js",function(){});  異步加載a.js，只有a.js成功加載之后才執行函數

3.  head.js('a.js','b.js','c.js'...'n.js')  并行下載里面的js，并按順序執行

4.  head.js("a.js","b.js","c.js",function(){ }) a.js、b.js、 c.sj 并行下載里面的js，并按順序執行  全部加載成功后執行后面的回調函數

5.  head.js(a.js); head.js(b.js); head.js(c.js)  類(lèi)似2

6.  head.js(a.js).js(b.js).js(c.js)   類(lèi)似2

7.  head.read(function(){})  簡(jiǎn)潔寫(xiě)法  head(function(){}); 頁(yè)面所有head.js加載完成之后才會(huì )執行

8.  head.read('a.js',function(){})  在頁(yè)面所有head.js加載完成之后才加載a.js

9.  head.onlyready('a.js')   //僅加載 只負責加載JS但不執行

10.  head.ready('c.js',function(){
     a.execut(); //在需要執行的地方執行execut方法。
})  

11.  head.load('jQuery.js',function(){})

12.  head.load('a.css')

head.test  head.feature  head.boxshadow   ....  

給腳本起別名

head.js(
    {a:"http://www.quetuo.cn/js/a.js"},
    {b:"http://www.quetuo.cn/js/b.js"},
    {c:"http://www.quetuo.cn/js/c.js"},
    "d.js" //別名可選
)

head.ready('a',function(){
        alert('a.js加載完成')；
}) 頁(yè)面中的d.js加載完成后才加載a.js 并執行回調函數

可以先將頁(yè)面全部輸出再用headjs加載需要的腳本，應用window.onload事件，防止腳本加載不成功頁(yè)面一直打轉！
<script type="text/javascript" src="head.js"></script>

<script type="text/javascript">
window.onload=function(){
    head.js('jquery.js'),function(){}
}
</script>