异步动态加载js与css文件的js代码

 更新时间:2013年09月15日 15:11:02   作者:  
这篇文章介绍了异步动态加载js与css文件的几种方法,有需要的朋友可以参考一下

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>

相关文章

  • ECharts地图绘制和钻取简易接口详解

    ECharts地图绘制和钻取简易接口详解

    这篇文章主要给大家介绍了关于ECharts地图绘制和钻取简易接口的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用ECharts具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • js防抖具体实现以及详细原理步骤说明(附实例)

    js防抖具体实现以及详细原理步骤说明(附实例)

    节流和防抖这里两个词可能对一些初入JavaScript的同学比较陌生,下面这篇文章主要给大家介绍了关于js防抖具体实现以及详细原理步骤的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • js实现为a标签添加事件的方法(使用闭包循环)

    js实现为a标签添加事件的方法(使用闭包循环)

    这篇文章主要介绍了js实现为a标签添加事件的方法,基于闭包循环实现事件添加的功能,涉及javascript闭包与事件操作相关技巧,需要的朋友可以参考下
    2016-08-08
  • 微信小程序实现加入购物车滑动轨迹

    微信小程序实现加入购物车滑动轨迹

    这篇文章主要为大家详细介绍了微信小程序实现加入购物车滑动轨迹,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-11-11
  • 简单聊聊TypeScript只读修饰符

    简单聊聊TypeScript只读修饰符

    有的时候我们希望对类成员(属性,方法)进行一定的访问控制,来保证数据的安全,通过类修饰符可以做到这一点,目前typescript提供了四种修饰符,这篇文章主要给大家介绍了关于TypeScript只读修饰符的相关资料,需要的朋友可以参考下
    2022-04-04
  • 使用JS 插件qrcode.js生成二维码功能

    使用JS 插件qrcode.js生成二维码功能

    qrcode.js是一个使用比较多的js生成二维码的插件,非常方便,接下来通过本文给大家分享使用JS 插件qrcode.js生成二维码功能,需要的朋友参考下
    2017-02-02
  • js中关于一个分号的崩溃示例

    js中关于一个分号的崩溃示例

    下面的js代码不管if条件的结果是true还是false都会执行大括号的代码,结果发现if条件括号后面多写了分号,崩溃啊
    2013-11-11
  • js实现类似新浪微博首页内容渐显效果的方法

    js实现类似新浪微博首页内容渐显效果的方法

    这篇文章主要介绍了js实现类似新浪微博首页内容渐显效果的方法,实例分析了渐显效果的实现要点与方法,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • js实现百度搜索提示框

    js实现百度搜索提示框

    本文主要分享了js实现百度搜索提示框的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • JS的函数调用栈stack size的计算方法

    JS的函数调用栈stack size的计算方法

    本篇文章给大家分享了关于JS的函数调用栈stack size的计算方法的相关知识点,有兴趣的朋友参考学习下。
    2018-06-06

最新评论