异步动态加载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的IE和Firefox兼容性汇编
Jul 01 Javascript
JavaScript 不只是脚本
May 30 Javascript
一个简单的瀑布流效果(主体形式自写)
May 27 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
May 23 Javascript
JS实现网页游戏中滑块响应鼠标点击移动效果
Oct 19 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
深入理解js中的加载事件
Feb 08 Javascript
深入理解Vue 的条件渲染和列表渲染
Sep 01 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 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
file_get_contents获取不到网页内容的解决方法
2013/03/07 PHP
php中的常用魔术方法总结
2013/08/02 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
JavaScript实现网页截图功能
2014/10/16 Javascript
JavaScript中Number.NEGATIVE_INFINITY值的使用详解
2015/06/05 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
红黑树的插入详解及Javascript实现方法示例
2018/03/26 Javascript
JavaScript箭头函数中的this详解
2019/06/19 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
Python中的字典遍历备忘
2015/01/17 Python
python并发编程之多进程、多线程、异步和协程详解
2016/10/28 Python
Python学习入门之区块链详解
2017/07/25 Python
python3使用flask编写注册post接口的方法
2018/12/28 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
英国天然保健品网站:Simply Supplements
2017/03/22 全球购物
应届生财务会计求职信
2013/11/05 职场文书
客服部工作职责范本
2014/02/14 职场文书
护理专业毕业生自我鉴定总结
2014/03/24 职场文书
公务员诚信承诺书
2014/05/26 职场文书
财政局长个人总结
2015/03/04 职场文书
停水通知
2015/04/16 职场文书
2015最新民情日记范文
2015/06/26 职场文书
演讲比赛主持词
2015/06/29 职场文书
初中政治教学工作总结
2015/08/13 职场文书
《爬天都峰》教学反思
2016/02/23 职场文书
pytorch 如何使用batch训练lstm网络
2021/05/28 Python
MySQL中CURRENT_TIMESTAMP的使用方式
2021/11/27 MySQL
Docker部署Mysql8的实现步骤
2022/07/07 Servers