异步动态加载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的无刷新分页技术
Jun 11 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
jQuery监听浏览器窗口大小的变化实例
Feb 07 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
Jun 08 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
javascript少儿编程关于返回值的函数内容
May 27 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 Javascript
typescript配置alias的详细步骤
Aug 12 Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 Javascript
vue中配置scss全局变量的步骤
Dec 28 Vue.js
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_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php实现图片文件与下载文件防盗链的方法
2014/11/03 PHP
使用URL传输SESSION信息
2015/07/14 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
来自国外的页面JavaScript文件优化
2010/12/08 Javascript
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
JS方法调用括号的问题探讨
2014/01/24 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
基于jQuery实现在线选座之高铁版
2015/08/24 Javascript
详解AngularJS中$http缓存以及处理多个$http请求的方法
2016/02/06 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
JavaScript制作简易计算器(不用eval)
2017/02/05 Javascript
Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法
2017/02/17 Javascript
JavaScript瀑布流布局实现代码
2017/05/06 Javascript
详解JavaScript中return的用法
2017/05/08 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
2018/08/27 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
JavaScript中判断为整数的多种方式及保留两位小数的方法
2019/09/09 Javascript
jQuery实现王者荣耀手风琴效果
2020/01/17 jQuery
微信小程序用canvas画图并分享
2020/03/09 Javascript
python多线程用法实例详解
2015/01/15 Python
Python实现计算最小编辑距离
2016/03/17 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
详解python中的hashlib模块的使用
2019/04/22 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
关于Tensorflow 模型持久化详解
2020/02/12 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
学生上课说话检讨书
2014/10/25 职场文书
幼儿园百日安全活动总结
2015/05/07 职场文书
浅谈python数据类型及其操作
2021/05/25 Python
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis