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


Posted in Javascript onSeptember 15, 2013

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>
Javascript 相关文章推荐
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
javascript两种function的定义介绍及区别说明
May 02 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
对vuejs的v-for遍历、v-bind动态改变值、v-if进行判断的实例讲解
Aug 27 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
vue实现倒计时获取验证码效果
Apr 17 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 #Javascript
js左侧三级菜单导航实例代码
Sep 13 #Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 #Javascript
jquery mobile事件多次绑定示例代码
Sep 13 #Javascript
JQuery实现点击div以外的位置隐藏该div窗口
Sep 13 #Javascript
javascript仿php的print_r函数输出json数据
Sep 13 #Javascript
js调用图片隐藏&amp;显示实现代码
Sep 13 #Javascript
You might like
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
php图片合成方法(多张图片合成一张)
2017/11/25 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
js 解决“options为空或不是对象”
2008/12/22 Javascript
javascript椭圆旋转相册实现代码
2012/01/16 Javascript
不提示直接关闭网页窗口的JS示例代码
2013/12/17 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
深入理解js中的加载事件
2017/02/08 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue滚动插件better-scroll使用详解
2019/10/18 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
python快速查找算法应用实例
2014/09/26 Python
python使用fork实现守护进程的方法
2017/11/16 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
python生成每日报表数据(Excel)并邮件发送的实例
2019/02/03 Python
聊聊python里如何用Borg pattern实现的单例模式
2019/06/06 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
用Python将Excel数据导入到SQL Server的例子
2019/08/24 Python
pytorch中使用cuda扩展的实现示例
2020/02/12 Python
python使用布隆过滤器的实现示例
2020/08/20 Python
PHP面试题附答案
2015/11/28 面试题
说一下mysql, oracle等常见数据库的分页实现方案
2012/09/29 面试题
网络方面基础面试题
2012/11/16 面试题
给校长的建议书300字
2014/05/16 职场文书
幼儿园六一亲子活动方案
2014/08/26 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
2014年调度员工作总结
2014/11/19 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
会计实训总结范文
2015/08/03 职场文书
MySQL分区表管理命令汇总
2022/03/21 MySQL