如何使用headjs来管理和异步加载js

现在有许多成熟的js模块加载器，比如requirejs和seajs等，但是对一些小的项目来说，它们的功能可能太过于“强大”，也许我们只是想要有一个能动态加载js的功能，或许我们只是想装B一下，让自己写出的页面没有一大堆的这样的东西。前面说的两种js加载器都是更强调模块性，也就是更强调js文件的组织和管理，更适用于大的项目。

就像刚刚说的，我只想有一个js文件加载器，我只需提供给它一个js文件的地址就行了的那种呢？那就进入我们的主题了，使用headjs吧。

首先，我想说一下Javascript的装载和执行。通常来说，浏览器对于Javascript的运行有两大特性：1）载入后马上执行，2）执行时会阻塞页面后续的内容（包括页面的渲染、其它资源的下载）。于是，如果有多个js文件被引入，那么对于浏览器来说，这些js文件被被串行地载入，并依次执行。 而headjs可以异步地把js文件下载到用户的本地，但是不执行，仅当在我们想要执行的时候去执行 。

基本用法

以下是它的基本用法：

// 最简单的例子，异步加载js
head.js("/path/to/file.js");
// 异步加载js，只在js加载成功之后执行后面的函数
head.js("/path/to/file.js", function() {
});
// 并行下载下面的js，并且按顺序加载执行js
head.js("file1.js", "file2.js", ... "fileN.js");
// 并行下载js，并且按顺序加载执行js，加载完成后执行后面的函数
head.js("file1.js", "file2.js", function() {
});
// 类似head.js("file1.js", "file2.js","fileN.js");写法不一样而已
head.js("file1.js");
head.js("file2.js");
head.js("file3.js");
// 还可以这么写
head.js("file1.js").js("file1.js").js("file3.js");

脚本回调

上面的例子说明了最基本的使用，并且回调函数基本和加载放在一起，当我们需要把脚本写在页面底部，而回调函数却在其他地方定义了，不期望在回调函数依赖的脚本还未加载之前执行，我们可以用到head.ready，基本用法如下：

//只有在页面所有head.js加载完成之后才会执行
head.ready(function() {
});
// 简洁的写法如下
head(function(){
});
// 在页面所有head.js加载完成之后才加载file1.js
head.ready("file1.js",function(){
});

脚本别名

可以通过给脚本一个别名方便管理维护理解，使用方法如下：

// 按headjs中的脚本顺序，下载并加载里面脚本，在脚本tool加载完成之后执行下面的回调
head.ready("tools", function() {
 // 调用
 $(".tip").tooltip();
});
// 给脚本起别名
head.js( {jquery: "http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"}, {tools: "http://cnd.jquerytools.org/1.2.5/tiny/jquery.tools.min"}, {heavy: "http://a.heavy.library/we/dont/want/to/wait/for.js"},
 // 别名可选
 "http://can.be.mixed/with/unlabeled/files.js"
);

使用心得

顺便介绍一下小林的一点点使用心得，先把网页全部输出，这时候全部的内容都未依赖脚本，然后再用headjs加载需要的脚本，来使页面动态化，并应用了window.onload事件，防止脚本加载不成功页面一直打转让用户误以为页面还没加载完，下面是详细代码：

<script type="text/javascript" src="http://linjunlong.com/wp-content/themes/L/js/head.min.js" ></script>
<script type="text/javascript">
 window.onload=function() {
 head.js("http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
  function() {
  });
 }
</script>

这样做即使无法加载jquery等其他脚本也不会影响网页的使用

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • AngularJs 动态加载模块和依赖

    最近项目比较忙额,白天要上班,晚上回来还需要做Angular知识点的ppt给同事,毕竟年底要辞职了,项目的后续开发还是需要有人接手的,所以就占用了晚上学习的时间.本来一直不打算写这些第三方插件的学习笔记,不过觉得按需加载模块并且成功使用这个确实是个好处,还是记录下来吧.基于本兽没怎么深入的使用requireJs,所以本兽不知道这个和requireJs有什么区别,也不能清晰的说明这到底算不算Angular的按需加载. 为了实现这篇学习笔记知识点的效果,我们需要用到: angular:https:/

  • headjs实现网站并行加载但顺序执行JS

    http://headjs.com/ 并行加载JS,但是执行的时候却按顺序执行,提高网站速度 <script src="js/head.min.js"></script> <script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_valida

  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序开发过程中出现错误,经过一番思考解决此问题,这里给大家提醒下! 加载 app-service.js 错误 WAService.js:2 不要在 undefined.js 注册多个Page APP-SERVICE-Engine:Please do not register multiple Page in undefined.js 开始新建一个小程序,结果报这么多错误. 但是我点击到编辑页查看的时候,没有pages,utils呀.. 进入app.js没有注册多个page呀. 感觉很奇怪,

  • js简单判断flash是否加载完成的方法

    本文实例讲述了js简单判断flash是否加载完成的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> //判定是否加载成功 function checkLoaded(flash){ try{ return Math.floor(flash.PercentLoaded()) == 100 }catch(e){ return false; } } var flash = 'flash对象'; var intervalID =

  • js实现加载更多功能实例

    js实现加载更多功能实例

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方定义的方法使用,用起来总感觉很不顺心.再加上iscroll.js本身并没有集成加载更多的功能,需要进行自行扩展.想继续使用iscroll.js实现加载更多功能的,上面给的链接可以看看. h5项目里需要实现简单的分页功能,由于是移动端,考虑用『加载更多』会更好,而不是PC端

  • JS实现页面数据无限加载

    JS实现页面数据无限加载

    在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: 当滚动条滚动到页面底部时,提示"正在加载-". 当页面已经加载了所有数据后,滚动到页面底部会提示"数据已加载到底了": 实现数据无限加载的过程大致如下: 1.滚动条滚动到页面底部. 2.触发ajax加载,把请求返回的数据加载到列表后面. 如何判断滚动条是否滚动到页面底

  • 用headjs来管理和加载js 提高网站加载速度

    现在有许多成熟的js模块加载器,比如requirejs和seajs等,但是对一些小的项目来说,它们的功能可能太过于"强大",也许我们只是想要有一个能动态加载js的功能,或许我们只是想装B一下,让自己写出的页面没有一大堆的<script src="a.js"></script>这样的东西.前面说的两种js加载器都是更强调模块性,也就是更强调js文件的组织和管理,更适用于大的项目. 就像刚刚说的,我只想有一个js文件加载器,我只需提供给它一个js

  • Javascript实现图片加载从模糊到清晰显示的方法

    Javascript实现图片加载从模糊到清晰显示的方法

    1.背景介绍 在网络相册应用中用户查看照片是最朴素的需求,当网络比较慢的时候查看照片等待的时间是比较长的,用户体验会很差. 2.现状 现在加载照片的方法主要有一下两种: (1)最原始的方式在html页面直接用img标签加载显示照片.该方法在网络速度比较慢或者要显示的照片比较大的时候会页面出现空白的等待过程,并且不能开始给用户看到照片大概的情况,用户体验比较不好 (2)在html页面先用img标签加载显示照片的缩略图,同时用javascript隐藏的加载照片的原图,等照片大图加载完成后再将原图显示

  • JS实现重新加载当前页面

    [javascript] view plain copy print? 用JavaScript刷新上级页面和当前页面 <script type="text/javascript"> window.parent.main.document.location.reload();//上级页面 document.location.reload();//当前页面 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方

  • JS实现重新加载当前页面或者父页面的几种方法

    在开发过程中想要在某个时机去刷新某个固定的页面,去更新该页面某些控件的属性,比如显示隐藏.是否可点击等. 是用的主要是通过 刷新该页面, 方法如下: 方法一: 在该页面中调用: location.reload();  方法二: 在该页面调用:    locatiion.replace("NEW_URL"); 方法三: windows.location.href="NEW_URL"; 当然 也支持子页面刷新父页面的操作,但是子页面和父页面是通过HTML包含的关系,如果

  • 原生JS实现首页进度加载动画

    js进度加载动画程序是本人的个人作品,写的不好,可以参考,但未经本人允许,请不要用于其它用途! 早上写了个首页进度加载动画,本想在我的博客里用上,测试发现博客园加载太快,根本看不到动画效果,直接就加载'Complete'了,算了,还是不要把博客搞得太臃肿了! 于是我就写了个演示页面,在body里加了个iframe来加载大一点的网站,这样就看出效果了! 用Safari打开貌似CSS动画的播放时间变成同步了,不知道什么原因,本地测试又没问题(请大神指点!),用Chrome.Firefox倒是没问题,

  • AngularJS模板加载用法详解

    本文实例讲述了AngularJS模板加载用法.分享给大家供大家参考,具体如下: angular模板加载 ----ng-template AngularJS作为mvc(或者说mvvm)框架,同样具备模板这一基本概念. NG加载模板的顺序为 内存加载---AJAX加载. 内存加载 如果之前使用过Bootstrap 插件的ng版,即angular-ui,就会了解到这种方式的具体应用.模板本质上是字符串,把字符串直接写入内存,加载时直接从内存获取,速度会更快,有两种方式显式启用内存加载. 通过使用 $t

  • Ext JS动态加载JavaScript创建窗体的方法

    Ext JS动态加载JavaScript创建窗体的方法

    JavaScript不需要编译即可运行,这让JavaScript构建的应用程序可以变得很灵活.我们可以根据需要动态从服务器加载JavaScript脚本来创建和控制UI来与用户交互.下面结合Ext JS来说明如何从服务器上动态加载JS脚本来动态创建窗体.  1 项目结构:  项目结构如下:其中GetJSUI一般处理程序用来从数据库表中抓取UI配置,并返回到客户端:Contents文件夹下用HTML文件和JS库等. 2 数据库表结构 可以用下面的SQL在MSSQL中创建表,其中JavaScriptC

  • js插件dropload上拉下滑加载数据实例解析

    js插件dropload上拉下滑加载数据实例解析

    本文实例为大家分享了dropload插件上拉下滑加载数据的具体代码,供大家参考,具体内容如下 效果图: 1.导入js  dropload.min.js  zepto.min.js    <!-- jQuery1.7以上 或者 Zepto 二选一,不要同时都引用 --> 2.后台查询 /** * 我找的劵 * * @return */ @Action("IFindTicket") public String IFindTicket() { try { FuTransactio

随机推荐