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

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>

赞 (0)

相关推荐

  • javascript 文件的同步加载与异步加载实现原理

    HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值. defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持. language: 已废弃.大部分浏览器会忽略该值. src: 可选.指定引入的外部代码文件,不限制后缀名. type: 必选.指定脚本的内容类型(M

  • 动态加载js的几种方法

    1.直接document.write <script language=javascript> document.write(<script src='test.js'><\/script>); </script> 2.动态改变已有script的src属性 <script src='' id=s1></script> <script language=javascript> s1.src=test.js </scri

  • 动态加载JS文件的三种方法

    直接看实例.例1 重新加载js文件 复制代码 代码如下: function loadJs(file) {            var head = $("head").remove("script[role='reload']");            $("<scri" + "pt>" + "</scr" + "ipt>").attr({ role: 're

  • 同步异步动态引入js文件的几种方法总结

    动态加载js文件 有时候我们需要根据参数不同来引入不同的js文件,用html直接写标签满足不了我们的需求,总结几种方法,以及同步异步加载的各种需求 一.直接加载 <div id="divId"></div> <script> 二.异步加载,并发执行,但引入js内容不能直接使用 //1.1 直接document.write document.write("<script src='test.js'><\/script>

  • JS 动态加载js文件和css文件 同步/异步的两种简单方式

    /*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

  • 多浏览器兼容的动态加载 JavaScript 与 CSS第1/2页

    在介绍ensure内部的实现之前,让我们先来看看其功能: ensure({ html: "popup.html", javascript: "popup.js", css: "popup.css" }, function() { Popup.show("hello world"); } ); 在这段代码中,ensure首先会确保popup.html.popup.js.popup.css这3个文件的加载,如果都没加载过ensur

  • Java 动态加载jar和class文件实例解析

    Java 动态加载jar和class文件实例解析

    本文研究的主要是Java 动态加载jar和class文件的相关内容,具体如下. JAVA中类文件加载是动态的.也就是说当我们用到的时候才会去加载,如果不用的话,就不会去加载我们的类. JAVA为我们提供了两种动态机制.第一种是隐式机制.第二种是显示机制.如下: 两种方法: 隐式机制 :new一个对象 + 调用类的静态方法 显式机制 :由 java.lang.Class的forName()方法加载 由 java.lang.ClassLoader的loadClass()方法加载 1.Class.fo

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

    jquery动态加载css,js文件方法简单很, 例 方法1: 代码如下 复制代码 代码如下: $.getscript("test.js"); 方法2: 代码如下 复制代码 代码如下: function loadjs(file){ var head = $('head').remove('#loadscript'); $("<scri"+"pt>"+"</scr"+"ipt>").a

  • 在WPF中动态加载XAML中的控件实例代码

    本文实例讲述了在WPF中动态加载XAML中的控件的方法.分享给大家供大家参考,具体如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Windows; using System.Windows.Controls; using System.Windows.Data; using System.Windows.Documents; using S

  • Echarts动态加载多条折线图的实现代码

    背景:动态加载多条折线图,折线图条数不确定 页面效果: 页面代码 //气象数据 function serchQx(beginTime, endTime, str, parameter) { $("#rr").html("");//将循环拼接的字符串插入下拉列表 var t = $("#imageParameter").val(); $ .ajax({ type : "POST", data : { "str"

  • 详解VueJs异步动态加载块

    首先定义组件为异步加载 define(['jquery','vue'],function($,Vue){ Vue.component('comp1',function(resolve){ require(['component/comp1'],resolve); }); Vue.component('comp2',function(resolve){ require(['component/comp2'],resolve); }); var b = new Vue({ el:"#app"

  • PhotoSwipe异步动态加载图片方法

    在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片. 特点: 1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限. 3. 从PhotoSwipe用法来看,在PhotoSwipe初始化前必须把所有图片列出.  instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options ); 标签a是PhotoSwipe初始化前的, 之后

  • 利用JQuery的load函数动态加载其它页面的内容的实现代码

    在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>JQuery - Load</title> <link rel="stylesheet" media="al

  • Asp.net 动态加载用户自定义控件,并转换成HTML代码

    如果页面单纯的使用js来创建,要写大量的代码,而且不直观. 在asp.net中,其实我们可以创建用户自定义控件,通过Ajax请求返回用户自定义控件HTML代码. 复制代码 代码如下: public static string RangerUsControl(string controlName) { StringBuilder build = new StringBuilder(); HtmlTextWriter htmlWriter = new HtmlTextWriter(new Strin

  • 异步动态加载JS并运行(示例代码)

    如下所示: 复制代码 代码如下: (function(){var ga=document.createElement('script');ga.type?=?'text/javascript';?ga.async?=?true;ga.src?=?('https:'?==?document.location.protocol???'https://ssl'?:?'http://www')?+?'.google-analytics.com/ga.js';    var?s?=?document.ge

随机推荐