异步动态加载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 ajax 同步异步的执行示例代码
Jun 23 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
Jan 09 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 Javascript
微信小程序开发入门基础教程
Apr 19 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
在Vue中使用echarts的方法
Feb 05 Javascript
bing Map 在vue项目中的使用详解
Apr 09 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
JS实现判断有效的数独算法示例
Feb 25 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
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
图书管理程序(一)
2006/10/09 PHP
php Static关键字实用方法
2010/06/04 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
php常用正则函数实例小结
2016/12/29 PHP
PHP ajax+jQuery 实现批量删除功能实例代码小结
2018/12/06 PHP
javascript offsetX与layerX区别
2010/03/12 Javascript
javaScript checkbox 全选/反选及批量删除
2010/04/28 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
2014/06/06 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
Node.js 应用跑得更快 10 个技巧
2016/04/03 Javascript
静态页面html中跳转传值的JS处理技巧
2016/06/22 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
JS面向对象的程序设计相关知识小结
2018/05/26 Javascript
浅谈VUE单页应用首屏加载速度优化方案
2018/08/28 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
vue移动端使用appClound拉起支付宝支付的实现方法
2019/11/21 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
[23:21]Ti4 冒泡赛第二轮DK vs C9 2
2014/07/14 DOTA
[49:27]2018DOTA2亚洲邀请赛 4.4 淘汰赛 TNC vs VG 第一场
2018/04/05 DOTA
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
Python3安装Pymongo详细步骤
2017/05/26 Python
Python之文字转图片方法
2018/05/10 Python
selenium+python自动化测试之环境搭建
2019/01/23 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
CSS3使用多列制作瀑布流
2016/05/10 HTML / CSS
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
雏鹰争章活动总结
2014/05/09 职场文书
社区健康教育工作方案
2014/06/03 职场文书
2015年新农村建设指导员工作总结
2015/07/24 职场文书
素质教育学习心得体会
2016/01/19 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL