点击这里给我发消息 咨询电话: 130-2284-0126
网站制作、网络营销、托管——剑锋所指,所向披靡 (绵阳网络营销QQ群:1961435)
高品质 低价格
最好服务 永远坚持
为梦想
{ 绵阳剑锋网络科技 }
  • ————绵阳剑锋网络打造陕西网络营销第一品牌!
  • ————敢问天下网站几许,且看老夫手段如何!
  • ————咨询电话: 130-2284-0126 或 187-2951-9978
  • ————咨询 Q Q : 点击这里给我发消息 点击这里给我发消息
当前位置: 主页 > 行业新闻 > IT技术 >

head.js 小型网站并行动态加载JS利器 (js文件加载器)

head.js 小型网站并行动态加载JS利器 (js文件加载器)

head.js   ——   The only script in your HEAD   让head标签中仅有一个script标签

快速加载JS和css文件

通常情况下JS两大特性 1. 载入后马上执行  2. 执行时会阻塞页面后续的内容 3. 串行加载 按顺序加载,所以每个JS有加载时间,所以JS越多加载的时间越长,如果采用并行加载也叫异步加载并行执行(就是所有JS文件同时加载)的话,JS加载速度能提高差不多一倍,headjs就是并行加载的方式来提高网站JS的加载速度,并且headjs提供了缓存机制,加载的文件可以被缓存,加载但不执行,仅当在我们想要执行的时候执行。
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)  类似2

6.  head.js(a.js).js(b.js).js(c.js)   类似2

7.  head.read(function(){})  简洁写法  head(function(){}); 页面所有head.js加载完成之后才会执行

8.  head.read('a.js',function(){})  在页面所有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:"/js/a.js"},
    {b:"/js/b.js"},
    {c:"/js/c.js"},
    "d.js" //别名可选
)

head.ready('a',function(){
        alert('a.js加载完成');
}) 页面中的d.js加载完成后才加载a.js 并执行回调函数

可以先将页面全部输出再用headjs加载需要的脚本,应用window.onload事件,防止脚本加载不成功页面一直打转!
<script type="text/javascript" src="head.js"></script>

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