异步动态加载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 对象介绍
Jan 20 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
js如何判断用户是在PC端和还是移动端访问
Apr 24 Javascript
原生js和jquery实现图片轮播特效
Apr 23 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
BootstrapTable+KnockoutJS自定义T4模板快速生成增删改查页面
Aug 01 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
Dec 15 Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 Javascript
微信小程序 轮播图实现原理及优化详解
Sep 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
多文件上载系统完整版
2006/10/09 PHP
php header Content-Type类型小结
2011/07/03 PHP
WordPress开发中用于获取近期文章的PHP函数使用解析
2016/01/05 PHP
轻松实现php文件上传功能
2017/02/17 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
PHP关于foreach复制知识点总结
2019/01/28 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
javascript 闭包疑问
2010/12/30 Javascript
基于jQuery的合并表格中相同文本的相邻单元格的代码
2011/04/06 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
jquery简单实现图片切换效果的方法
2015/05/12 Javascript
js实现简单排列组合的方法
2016/01/27 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
关于jQuery中fade(),show()起始位置的一点小发现
2017/04/25 jQuery
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
JavaScript动态添加数据到表单并提交的几种方式
2019/06/26 Javascript
[46:38]完美世界DOTA2联赛PWL S2 Magma vs PXG 第三场 11.28
2020/12/02 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
June Jacobs尊积帕官网:知名的spa水疗护肤品牌
2019/03/21 全球购物
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
Unix控制后台进程都有哪些进程
2016/09/22 面试题
校长先进事迹材料
2014/02/01 职场文书
电气工程自动化求职信
2014/03/14 职场文书
中学校庆方案
2014/03/17 职场文书
作风建设演讲稿
2014/05/23 职场文书
2014年乡镇工作总结
2014/11/21 职场文书
结婚十年感言
2015/07/31 职场文书
关于食品安全的演讲稿范文(三篇)
2019/10/21 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python