异步动态加载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函数ajax
Aug 20 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
js取整数、取余数的方法
May 11 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
包含中国城市的javascript对象实例
Aug 03 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
javascript实现根据汉字获取简拼
Sep 25 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
Oct 14 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
详解webpack 入门与解析
Apr 09 Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 Javascript
在vue中封装方法以及多处引用该方法详解
Aug 14 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实现禁用IE和火狐的缓存问题
2012/12/03 PHP
php将文件夹打包成zip文件的简单实现方法
2016/10/04 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
Jquery性能优化详解
2014/05/15 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
轻松实现JavaScript图片切换
2016/01/12 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
js字符串操作总结(必看篇)
2016/11/22 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
Node.js利用debug模块打印出调试日志的方法
2017/04/25 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
vue实现鼠标移过出现下拉二级菜单功能
2019/12/12 Javascript
vue实现抽屉弹窗效果
2020/11/15 Javascript
Python语言描述随机梯度下降法
2018/01/04 Python
Python列表推导式、字典推导式与集合推导式用法实例分析
2018/02/07 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
使用Python将字符串转换为格式化的日期时间字符串
2019/09/01 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python类的绑定方法和非绑定方法实例解析
2020/03/04 Python
django 读取图片到页面实例
2020/03/27 Python
如何提高python 中for循环的效率
2020/04/15 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
世界上最全面的草药补充剂和顶级品牌维生素网站:HerbsPro
2019/01/20 全球购物
Desigual美国官方网站:西班牙服装品牌
2019/03/29 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
大学生活自我评价
2014/04/09 职场文书
公司活动总结怎么写
2014/06/25 职场文书
学校端午节活动方案
2014/08/23 职场文书
高中生毕业评语
2014/12/30 职场文书
单位租车协议书
2015/01/29 职场文书
详解Android中的TimePickerView(时间选择器)的用法
2022/04/30 Java/Android