异步动态加载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 相关文章推荐
ExtJs扩展之GroupPropertyGrid代码
Mar 05 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
表格单元格交错着色实现思路及代码
Apr 01 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
Jan 24 Javascript
jQuery知识点整理
Jan 30 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
jQuery中的一些常见方法小结(推荐)
Jun 13 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
JavaScript中日期函数的相关操作知识
Aug 03 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
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
laravel中的错误与日志用法详解
2016/07/26 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
获取客户端网卡MAC地址和IP地址实现JS代码
2013/03/17 Javascript
js 控制图片大小核心讲解
2013/10/09 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
三种Node.js写文件的方式
2016/03/08 Javascript
基于jquery实现弹幕效果
2016/09/29 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
2016/10/31 Javascript
js实现产品缩略图效果
2017/03/10 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
Vue watch响应数据实现方法解析
2020/07/10 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
python类和函数中使用静态变量的方法
2015/05/09 Python
Python安装Numpy和matplotlib的方法(推荐)
2017/11/02 Python
Python语言进阶知识点总结
2019/05/28 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
详解Django ORM引发的数据库N+1性能问题
2020/10/12 Python
5款实用的python 工具推荐
2020/10/13 Python
CSS3贝塞尔曲线示例:创建链接悬停动画效果
2020/11/19 HTML / CSS
物流专业大学生求职信范文
2013/10/28 职场文书
行政经理岗位职责
2013/11/09 职场文书
工作违纪检讨书
2014/02/17 职场文书
网络技术专业求职信
2014/02/18 职场文书
小学生竞选班干部演讲稿
2014/04/24 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
小学优秀学生评语
2014/12/29 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
IDEA中sout快捷键无效问题的解决方法
2022/07/23 Java/Android