异步动态加载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 相关文章推荐
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
Jun 29 Javascript
javascript来定义类的规范小结
Nov 19 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
springMVC结合AjaxForm上传文件
Jul 12 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
Mar 08 Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 Javascript
vue组件中使用props传递数据的实例详解
Apr 08 Javascript
js变量声明var使用与不使用的区别详解
Jan 21 Javascript
vuejs+element UI table表格中实现禁用部分复选框的方法
Sep 20 Javascript
vue子传父关于.sync与$emit的实现
Nov 05 Javascript
layui 弹出层值回传解决方式
Nov 14 Javascript
微信小程序实现星级评价
Nov 20 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 缓存实现代码及详细注释
2010/05/16 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
JS产生随机数的用法小结
2016/12/10 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
详解VUE前端按钮权限控制
2019/04/26 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue实现选中效果
2020/10/07 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
[02:05]2014DOTA2西雅图邀请赛 老队长全明星大猜想谁不服就按进显示器
2014/07/08 DOTA
python的常见命令注入威胁
2013/02/18 Python
Python实现堆排序的方法详解
2016/05/03 Python
Python 元类实例解析
2018/04/04 Python
Python实现统计英文文章词频的方法分析
2019/01/28 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
python切片(获取一个子列表(数组))详解
2019/08/09 Python
Python 迭代,for...in遍历,迭代原理与应用示例
2019/10/12 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
大学毕业登记表自我鉴定
2013/10/09 职场文书
如何写好优秀的创业计划书
2014/01/30 职场文书
生产部管理制度
2014/01/31 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
劳保用品管理制度范本
2015/08/06 职场文书
大学生活委员竞选稿
2015/11/21 职场文书
详细聊聊浏览器是如何看闭包的
2021/11/11 Javascript
德生2P3收音机开箱评测
2022/04/30 无线电