异步动态加载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 相关文章推荐
js转义字符介绍
Nov 05 Javascript
基于JavaScript如何制作遮罩层对话框
Jan 26 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
JS数组实现分类统计实例代码
Sep 30 Javascript
微信小程序swiper禁止用户手动滑动代码实例
Aug 23 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
详细谈谈JavaScript中循环之间的差异
Aug 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
php中3种方法统计字符串中每种字符的个数并排序
2012/08/27 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
PDO::_construct讲解
2019/01/27 PHP
浅谈PHP无限极分类原理
2019/03/14 PHP
判断用户的在线状态 onbeforeunload事件
2011/03/05 Javascript
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jQuery事件绑定.on()简要概述及应用
2013/02/07 Javascript
JS数组合并push与concat区别分析
2015/12/17 Javascript
javascript拖拽效果延伸学习
2016/04/04 Javascript
理解Koa2中的async&amp;await的用法
2018/02/05 Javascript
angularJs提交文本框数据到后台的方法
2018/10/08 Javascript
JS中使用new Option()实现时间联动效果
2018/12/10 Javascript
react中Suspense的使用详解
2019/09/01 Javascript
js prototype深入理解及应用实例分析
2019/11/25 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
python实现的简单RPG游戏流程实例
2015/06/28 Python
Python检测网站链接是否已存在
2016/04/07 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python实现排序算法解析
2018/09/08 Python
Python实现的特征提取操作示例
2018/12/03 Python
Skyscanner新西兰:全球领先的旅游搜索网站
2019/08/26 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
介绍一下结构化程序设计方法和面向对象程序设计方法的区别
2012/06/27 面试题
介绍一下Java中的static关键字
2012/05/12 面试题
管理部部长岗位职责
2013/12/05 职场文书
集体婚礼证婚词
2014/01/13 职场文书
党性分析自查总结
2014/10/14 职场文书
处级干部考察材料
2014/12/24 职场文书
2015教师个人师德工作总结
2015/10/23 职场文书
Golang 实现超大文件读取的两种方法
2021/04/27 Golang
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
Nginx+Windows搭建域名访问环境的操作方法
2022/03/17 Servers