网站地图    收藏   

主页 > 前端 > javascript >

js异步动态加载js与css文件代码

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] 如果我们要动态加载js文件最简单办法就是使用jquery ajax中的getscript方法了,其它的还有我们自己写的一些方法,下面总结一下动态加载js与css文件。...

jquery动态加载css,js文件方法简单很,

方法1:

 代码如下 复制代码
$.getscript("test.js");

方法2:

 代码如下 复制代码

function loadjs(file){  

     var head = $('head').remove('#loadscript'); 

    $("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendto(head); 

}

方法3:

 代码如下 复制代码

$("<scri"+"pt>"+"</scr"+"ipt>").attr({src:file,type:'text/javascript',id:'load'}).appendto($('head').remove('#loadscript'));

下面附一些js动态加载js,css文件的方法。

以下代码是摘自news.qq.com页面里的代码的,本人未进行测试,程序看着应该没有问题的,可以做为参考的,主要用来在网页底部位置,实现动态加载js文件到网页<head>标签的后面,通过DOM来实现的,代码如下:

 代码如下 复制代码

<script>
 var SCRIPT_TIMEOUT = 20000;
 var QVPL_PATH = "/QVPL1.0.0.js";
 
 function loadHelper (jsurl) {
 var oScriptEl, oTimeoutHDL, oHead;
 oScriptEl = document.createElement("script");
 oScriptEl.type = "text/javascript";
 oScriptEl.language = "javascript";
 oScriptEl.src = jsurl;
 oScriptEl.onreadystatechange = doCallback;
 
 oScriptEl.onload = function()
 {
 this.readyState = "complete";
 doCallback();
 if(typeof(lianbo) == "object"){
 lianbo.init(window.QVPL);
 }
 };
 
 oTimeoutHDL = window.setTimeout(doError,SCRIPT_TIMEOUT);
 document.getElementsByTagName("head")[0].appendChild(oScriptEl);
 
 function doCallback()
 {
 if (oScriptEl.readyState == "complete" || oScriptEl.readyState == "loaded")
 {
 oScriptEl.onload = oScriptEl.onreadystatechange = new Function();
 window.clearTimeout(oTimeoutHDL);
 }
 };
 
 function doError()
 {
 oScriptEl.parentNode.removeChild(oScriptEl);
 };
 }
 
 loadHelper(QVPL_PATH);
 </script>

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论