javascript按顺序加载运行js方法
首先如果大家对js动态加载有不理解的地方可以参阅:
如何你的 script 上没有任何 异步,阻塞 等标注:
浏览器会异步加载 javascript 文件,但是会按照引用文件中的书写顺序从上到下执行解析 javascript
defer属性标记
defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。
也就是说defer属性的 script 就类似于将 script 放在body中的加载 效果一致.
但是defer属性在各个浏览器中支持程度有点不同,就是说,有的浏览器不完全支持.
async属性标注
async是html5新增的属性, 大部分先进支持该属性的.
该属性的作用是让脚本能异步加载,也就是说当浏览器遇到async属性的 script 时浏览器加载css一样是异步加载的
javascript 动态加载js文件
原理很简单,创建一个 script 节点,给节点赋予 script 的属性,然后 append 到 dom 的 head 标签中.
function loadjs(url){ var script = document.createelement('script'); script.setattribute('src', url); script.setattribute('type', 'text/javascript'); document.body.appendchild(script); return script; }
如果我们同时加载多个 javascript 文件
loadjs('a.js'); loadjs('b.js');
上面的效果是,a.js 和 b.js 文件会被异步同时加载,如果 b.js 文件比 a.js 文件小的话,很可能先加载执行 b.js ,完全不会按照书写结果加载执行
所以,如果你的 b.js 文件有依赖 a.js 的东西,那么就会报错,因为解释执行b.js 的时候,a.js 还在加载中.
控制javascript 加载执行顺序
我们对代码做如下改进
function loadjs(url, success) { var domscript = document.createelement('script'); domscript.src = url; success = success || function () { }; domscript.onload = domscript.onreadystatechange = function () { if (!this.readystate || 'loaded' === this.readystate || 'complete' === this.readystate) { success(); this.onload = this.onreadystatechange = null; this.parentnode.removechild(this); } } document.getelementsbytagname('head')[0].appendchild(domscript); }
通过script 节点上的 onload 和 onreadystatechange 属性来监听节点 src 是否加载完成
如果成功,调用回调函数 success();
我们在调用此方法的时候,可以通过 loadjs 回调函数来知道当前节点已经加载完成,然后在回调函数里继续加载其他 script 文件
loadjs(geturl('a.js'), function () { loadjs(geturl('b.js'), function () { console.log('a.js ,b.js 加载完成'); }); });
通过上面的方法加载,是一种同步阻塞加载, a.js 加载完成后才会加载执行 b.js 文件.
如果你的 javascript 文件没有相互依赖关系,不要使用这种方法.
上一篇: jquery-file-upload 文件上传带进度条效果
下一篇: 微信小程序实现鼠标拖动效果示例
推荐阅读
-
js利用递归与promise 按顺序请求数据的方法
-
js利用递归与promise 按顺序请求数据的方法
-
javascript按顺序加载运行js方法
-
两种方法实现在HTML页面加载完毕后运行某个js_javascript技巧
-
动态加载js的方法汇总_javascript技巧
-
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)_javascript技巧
-
js图片延迟加载的实现方法及思路_javascript技巧
-
js检测iframe是否加载完成的方法_javascript技巧
-
JS 动态加载脚本的4种方法_javascript技巧
-
关于JS判断图片是否加载完成且获取图片宽度的方法_javascript技巧