简述使用动态脚本加载JS,并且在浏览器中的兼容处理:
Firefox,Opera,Chrome,Safari3以上版本会在<script>元素接收完成是触发一个load事件,因此可以通过侦听此事件来获得脚本加载完成时的状态:
var script = document.createElement("script");
script.type="text/javascript";
// Firefox,Opera,Chrome,Safari 3+
script.onload=function(){
alert("Script loaded");
}
script.src="file1.js";
document.getElementsByTagName("head")[0].appendChild(script);
IE支持另一种实现方式,它会触发一个readystatechange事件;
下面的函数封装了标准及IE特有的实现方法:
function loadScript(url,callback){
var script = document.createElement("script");
script.type="text/javascript";
if(script.readyState){ // IE
script.onreadystatechange = function(){
if(script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null; // 只要loaded和complete任何一个触发,则删除事件处理器(以确保事件不会处理两次)
callback();
}
}
}else{ //其他浏览器
script.onload = function(){
callback();
}
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript()函数用法如下:
loadScript("file1.js",function(){
alert("File is loaded");
});
动态脚本加载凭借着它在跨浏览器兼容性和易用的优势,成为最通用的 无阻塞加载解决方案!
一旦页面初始化所需的代码完成下载,你可以继续自由的使用loadScript()去加载页面其他的功能所需的脚本;