异步动态加载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 学习专题(一) 如何应用ExtJS(附实例)
Mar 11 Javascript
open 动态修改img的onclick事件示例代码
Nov 13 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
JavaScript实现SHA-1加密算法的方法
Mar 11 Javascript
js拆分字符串并将分割的数据放到数组中的方法
May 06 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
vue构建动态表单的方法示例
Sep 22 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 Javascript
使用typescript改造koa开发框架的实现
Feb 04 Javascript
Javascript原型链及instanceof原理详解
May 25 Javascript
用vue 实现手机触屏滑动功能
May 28 Javascript
vue-video-player 断点续播的实现
Feb 01 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面向对象的方法重载两种版本比较
2008/09/08 PHP
ThinkPHP V2.2说明文档没有说明的那些事实例小结
2015/07/01 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP数组Key强制类型转换实现原理解析
2020/09/01 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
Node.js中调用mysql存储过程示例
2014/12/20 Javascript
jQuery Easyui datagrid连续发送两次请求问题
2016/12/13 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
jQuery实现给input绑定回车事件的方法
2017/02/09 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
javascript深拷贝的原理与实现方法分析
2017/04/10 Javascript
Node.js使用MySQL连接池的方法实例
2018/02/11 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
Python实现在tkinter中使用matplotlib绘制图形的方法示例
2018/01/18 Python
Python WEB应用部署的实现方法
2019/01/02 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
财务方面个人工作的自我评价
2013/12/28 职场文书
董事长秘书职责
2014/01/31 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
班组长岗位职责
2014/03/03 职场文书
保密承诺书
2014/03/27 职场文书
大学生活动总结模板
2014/07/02 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书