脚本的动态加载

标签：脚本 src document script function js 动态 加载

<script> 元素还可以动态生成，生成后再插入页面，从而实现脚本的动态加载。

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    document.head.appendChild(script);
});

这种方法的好处是，动态生成的 script 标签不会阻塞页面渲染，也就不会造成浏览器假死。但是问题在于，这种方法无法保证脚本的执行顺序，哪个脚本文件先下载完成，就先执行哪个。

如果想避免这个问题，可以设置 async 属性为 false。

['a.js', 'b.js'].forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
});

上面的代码不会阻塞页面渲染，而且可以保证 b.js 在 a.js 后面执行。不过需要注意的是，在这段代码后面加载的脚本文件，会因此都等待 b.js 执行完成后再执行。

如果想为动态加载的脚本指定回调函数，可以使用下面的写法。

function loadScript(src, done) { 　　var js = document.createElement('script');    js.src = src;    js.onload = function() {       done();    };    js.onerror = function() {      done(new Error('Failed to load script ' + src));    };    document.head.appendChild(js); }

 

标签：脚本,src,document,script,function,js,动态,加载
From： https://www.cnblogs.com/ladybug7/p/18239524