动态添加javascript并判断是否加载完成

稍微有点经验的开发人员都知道，浏览器加载js文件时页面处于阻塞状态，对用户体验极不友好，因为如果把js包含在head标签内，页面必须等到所有的head文件加载完成后才开始渲染，在此之前用户看到的是一片空白，如果超过3秒种还不出来，90%以上的用户会直接选择关闭页面。因此建议尽可能的减少在head里面放过多的js文件，特别是比较大的文件，我们可以把他们放到body后面，这样页面就能快速响应，js让它稍后加载，形成一种过渡效果，提升用户体验。

当然，放在body后的js文件可以直接写，也可以后面动态添加，如果不是很重要的js文件建议采用动态添加。

动态添加一个js文件到body

var s = document.createElement('script')
s.type = "text/javascript"
s.src = "https://cdn.somesite.com/ajax/libs/some.js"
document.body.append(s)

这时有些函数的执行必须等到动态添加的js加载完成之后才能使用，这个好解决，js有个属性 onreadystatechange,顾名思义应该就是js文件加载状态的改变，通过一些状态值就可以轻松的判断这个文件有没有加载完成，并执行相应的操作。

很简单，就这几句话

s.onload = s.onreadystatechange = function(){
   if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){  
      //do something here!
   }
   s.onload = s.onreadystatechange=null
}

完了，就这样