js异步加载方式有哪些_异步加载js文件的方法总结

更新时间:2019-05-09    来源:jquery    手机版     字体:

【www.bbyears.com--jquery】

方法一,jQuery.getScript

HTML 代码:

 代码如下


jQuery 代码:

jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js",
 function(){
  $("#go").click(function(){
    $(".block").animate( { backgroundColor: "pink" }, 1000)
      .animate( { backgroundColor: "blue" }, 1000);
  });
});

方法三

 

 代码如下 同步加载,单步加载,引入js内容可以直接使用
var Skip={};
//获取XMLHttpRequest对象(提供客户端同http服务器通讯的协议)
Skip.getXmlHttpRequest=function (){
    if ( window.XMLHttpRequest ) // 除了IE外的其它浏览器
           return new XMLHttpRequest() ;
    else if ( window.ActiveXObject ) // IE
            return new ActiveXObject("MsXml2.XmlHttp") ;
},
//导入内容
Skip.includeJsText =function (rootObject,jsText){
        if ( rootObject != null ){
             var oScript = document.createElement( "script" );
             oScript.type = "text/javascript";
            //oScript.id = sId;
            //oScript.src = fileUrl;
            //oScript.defer = true;
            oScript.text = jsText;
            rootObject.appendChild(oScript);
            //alert(oScript.text);
        }
       },
//导入文件
Skip.includeJsSrc =function (rootObject, fileUrl){
        if ( rootObject != null ){
             var oScript = document.createElement( "script" );
             oScript.type = "text/javascript";
             oScript.src = fileUrl;
             rootObject.appendChild(oScript);
       }
      },
//同步加载
Skip.addJs=function(rootObject, url){
        var oXmlHttp = Skip.getXmlHttpRequest() ;
        oXmlHttp.onreadystatechange = function(){//其实当在第二次调用导入js时,因为在浏览器当中存在这个*.js文件了,它就不在访问服务器,也就不在执行这个方法了,这个方法也只有设置成异步时才用到
            if ( oXmlHttp.readyState == 4 ){ // www.111cn.net 当执行完成以后(返回了响应)所要执行的
                if ( oXmlHttp.status == 200 || oXmlHttp.status == 304 ){ //200有读取对应的url文件,404表示不存在这个文件
                   Skip.includeJsSrc( rootObject, url);
                }  else{
                    alert( "XML request error: " + oXmlHttp.statusText + " (" + oXmlHttp.status + ")" ) ;
                }
            }
         }
         //1.True 表示脚本会在 send() 方法之后继续执行,而不等待来自服务器的响应,并且在open()方法当中有调用到onreadystatechange()这个方法。通过把该参数设置为 "false",可以省去额外的 onreadystatechange 代码,它表示服务器返回响应后才执行send()后面的方法.
         //2.同步执行oXmlHttp.send()方法后oXmlHttp.responseText有返回对应的内容,而异步还是为空,只有在oXmlHttp.readyState == 4时才有内容,反正同步的在oXmlHttp.send()后的操作就相当于oXmlHttp.readyState == 4下的操作,它相当于只有了这一种状态.
      oXmlHttp.open("GET", url, false); //url为js文件时,ie会自动生成 "<script src="*.js" type="text/javascript"> ",ff不会 
      oXmlHttp.send(null);
      Skip.includeJsText(rootObject,oXmlHttp.responseText);
      }
};
var rootObject=document.getElementById("divId");
Skip.addJs(rootObject,"test.js")//test.js文件中含有funciotn test(){alert("test");}
test();//即使马上调用也不会出错了.
</script>

方法三,自己用的加载js文件,支持多文件,不兼容ie

 代码如下


/**
 * 加载js文件
 * @param  {string || array}   url   js路径
 * @param  {Function} fn      加载完成后回调
 * @return {object}           game对象
 * @example
 * getScript("url.js",fn)
 * getScript(["url-1.js","url-2.js"],fn)
 */
game.getScript = (function() {
 var cache = {};//内部缓存下url,下次则不请求
 return function(url, fn) {
  if ("string" === typeof(url)) {
   url = [url]; //如果不是数组带个套
  };
  var i = 0,//循环起
   ok = 0,//加载成功几个js
   len = url.length,//一共几个js
   head = document.getElementsByTagName("head")[0],
   js, _url,
   create = function(url) {//创建js
    js = document.createElement("script");
    js.type = "text/javascript";
    js.src = url;
    head.appendChild(js);
    return js;
   };
  for (; i < len;) {
   if (cache[encodeURIComponent((_url = url[i++]))]) {//如果加载过
    (++ok >= len && fn) && fn();//如果加载完所有的js则执行回调
    continue;
   }
   cache[encodeURIComponent(_url)] = !0;//设置缓存
   js = create(_url);//创建js
   fn && (js.onload = function() {
    if (++ok >= len) {//如果加载完所有的js则执行回调
     fn();
    }
   });
  };
  head = js = _url = create  = null;
  return this;
 }
})();

本文来源:http://www.bbyears.com/wangyezhizuo/50127.html

热门标签

更多>>

本类排行