无阻塞的Javascript脚本（二）——动态脚本元素

通过DOM，你可以用Javascript动态创建<script>标签。

var script=document.createElement("script");script.type="text/script";script.src="file1.js";document.getElementByTagName("head")[0].appendChild(script);

 

file1.js会在该元素被添加到页面的时候开始下载。这种技术的重点在于，无论何时启动下载，文件的下载和执行过程都不会阻塞页面其他进程。

不过异步下载的js文件会带来一个问题，如果这个文件中有一些其他脚本需要用到的函数或者接口时，那么就会引发问题，所以我们是通过侦听脚本加载完成事件来解决这个问题。

var script=document.createElement("script");script.type="text/script";//firefox,chrome,opera,safariscript.onload=function(){alert("script load");};script.src="file1.js";document.getElementByTagName("head")[0].appendChild(script); 

 

这是firefox,chrome,opera,safari支持的onload事件。

转自我的javascript博客。

IE支持另一种方式，它会触发一个readystatechange事件。<script>标签在IE中的生命周期里有五个状态，其他不用多说，我们需要知道就是两个状态loaded和complete，因为只要这两个状态中任何一个都有可能是标识了readystate的最终状态。

所以，我们最好是同时检查这两个状态，其中任何一个触发，就删除事件处理器，这样事件就不会被触发两次。

var script=document.createElement("script");script.type="text/script";//IEscript.onreadystatechange=function(){if(script.readystate==="loaded"|| script.readystate==="complete"){script.onreadystatechange=null;alert("script loaded");}};script.src="file1.js";document.getElementByTagName("head")[0].appendChild(script); 

 

 

 现在我们就要实现这个方法的兼容性：

function loadscript(url,callback){var script=document.createElement("script");script.type="text/script";if(script.readystate){//IEscript.onreadystatechange=function(){if(script.readystate==="loaded"|| script.readystate==="complete"){script.onreadystatechange=null;callback();}};}else{script.onload=function(){callback();};}script.src="file1.js";document.getElementByTagName("head")[0].appendChild(script);} 

这个函数的用法是这样的：

loadscript("file.js",function(){alert("script loaded");}); 

由于这个过程是异步的，所以我们大可把js文件整理好合并成一个文件下载，大家也可以看出来，这个方法的兼容性和易用性都很好，所以毫无疑问是最通用的无阻塞加载解决方案。