异步动态加载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 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
jQuery 联动日历实现代码
May 31 Javascript
获得Javascript对象属性个数的示例代码
Nov 21 Javascript
JS替换文本域内的回车示例
Feb 18 Javascript
jQuery应用之jQuery链用法实例
Jan 19 Javascript
javascript基本包装类型介绍
Apr 10 Javascript
Bootstrap中表单控件状态(验证状态)
Aug 04 Javascript
Bootstrap表单控件学习使用
Mar 07 Javascript
Angularjs的键盘事件的绑定
Jul 27 Javascript
ztree实现左边动态生成树右边为内容详情功能
Nov 03 Javascript
微信小程序wepy框架笔记小结
Aug 08 Javascript
教你搭建按需加载的Vue组件库(小结)
Jul 29 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
法兰绒滤网冲泡
2021/03/03 冲泡冲煮
php汉字转拼音的示例
2014/02/27 PHP
php生成随机颜色方法汇总
2014/12/03 PHP
Yii清理缓存的方法
2016/01/06 PHP
laravel框架中控制器的创建和使用方法分析
2019/11/23 PHP
PHP常用header头定义代码示例汇总
2020/08/29 PHP
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
Javascript OOP之面向对象
2016/07/31 Javascript
bootstrap table复杂操作代码
2016/11/01 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
ES6新数据结构Map功能与用法示例
2017/03/31 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
如何将你的AngularJS1.x应用迁移至React的方法
2018/02/01 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
vuejs router history 配置到iis的方法
2018/09/20 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
Vue实现摇一摇功能(兼容ios13.3以上)
2021/01/26 Vue.js
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python中用函数作为返回值和实现闭包的教程
2015/04/27 Python
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
理论讲解python多进程并发编程
2018/02/09 Python
Python Pexpect库的简单使用方法
2019/01/29 Python
python实现对服务器脚本敏感信息的加密解密功能
2019/08/13 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
鱼油专家:Omegavia
2016/10/10 全球购物
LODI女鞋在线商店:阿利坎特的鞋类品牌
2019/02/15 全球购物
《明天,我们毕业》教学反思
2014/04/24 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
Pytorch 实现变量类型转换
2021/05/17 Python