当前位置:Gxlcms > JavaScript > 如何使用javascript加载脚本并执行回调代码实例详解

如何使用javascript加载脚本并执行回调代码实例详解

时间:2021-07-01 10:21:17 帮助过:6人阅读

我们可以动态的创建 <script> 元素,然后通过更改它的 src 属性来加载脚本,但是怎么知道这个脚本文件加载完成了呢,因为我们有些函数需要在脚本加载完成生效后才能开始执行。IE 浏览器中可以使用 <script> 元素的 onreadystatechange 来监控加载状态的改变,并通过判断它的 readyState 是 loaded 或 complete 来判断脚本是否加载完成。而非 IE 浏览器可以使用 onload 来直接判断脚本是否加载完成。

一个简单的实现过程看上去是下面这样的:


原理很简单,根据这两个简单的原理,我们进行一些修改,分别是串行加载和并行加载脚本。

当传一个包含多个JS文件路径的数组时,串行加载函数从第一个脚本文件加载开始,每加载成功一个便开始加载下一个脚本文件,全部加载完成后执行回调函数。而并行加载是一开始便加载全部的脚本文件,也就是他们从同一点开始加载,当全部加载完成后,执行回调函数。

经过测试,这两个函数兼容目前的所有主流浏览器。


在这里是把 <script> 标签动态的插入到页面中的 <head> 标签内部,并且加载完成后标签元素会被自动移除。
细心的你还会发现,这里使用了一种称作条件编译的方法作为表达式(!/*@cc_on!@*/0)来判断是否非 IE 浏览器,关于条件编译并不是本文的重点,有兴趣的您可以上网查找相关资料进行学习。

这两个函数的使用方法: 这里我们声明了一个数组变量,里面包含了两个远程的JS文件地址(当然 <script> 标签调用脚本是支持跨域的):


这里使用的是串联加载的函数,当然你也可以使用并联加载函数,这可以根据情况使用,建议每下一个脚本对上一个脚本有依赖性的使用串联加载,否则使用并联,因为原理上并联要比串联快那么些。

以上就是如何使用javascript加载脚本并执行回调代码实例详解的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行