----------------------------------js异步加载css
你需要的是异步加载css
function loadCSS(url){
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.rev = "stylesheet";
cssLink.type = "text/css";
cssLink.media = "screen";
cssLink.href = url;
document.getElementsByTagName("head").appendChild(cssLink);
}
//--
在footer生成<script> 标签调用这个函数即可。
1,新建一个css文件,例如new.css。里面进去你想加的css代码
2,在网页顶部的Html.js中加上上面这段代码
2,在输出foot的地方输出以下代码
<script type="text/javascript">
loadCSS(‘new.css’);
你需要的是异步加载css
function loadCSS(url){
var cssLink = document.createElement("link");
cssLink.rel = "stylesheet";
cssLink.rev = "stylesheet";
cssLink.type = "text/css";
cssLink.media = "screen";
cssLink.href = url;
document.getElementsByTagName("head").appendChild(cssLink);
}
//--
在footer生成<script> 标签调用这个函数即可。
1,新建一个css文件,例如new.css。里面进去你想加的css代码
2,在网页顶部的Html.js中加上上面这段代码
2,在输出foot的地方输出以下代码
<script type="text/javascript">
loadCSS(‘new.css’);
</script>
yepnope是一个异步有条件的js/css加载器,并且可以只下载用户所需的资源。
典型代码示例
yepnope({
});
当Modernizr.geolocation为真时,加载yep项也就是”normal.js”,否则加载nope项——可以同时加载多个文件。
jqAjax = {
//加载完成后的回调函数
callback: function () { },
//Main
getScript: function (url) {
if (batm.UtilAjax) {
var head = document.getElementsByTagName("head")[0] || document.documentElement;
if (this.getType(url).tag == 'script') {
this.readyScript(head, url);
}
if (this.getType(url).tag == 'link') {
this.readyCSS(head, url);
}
return true
}
},
//加载css
readyCSS: function (head, url) {
var css = this.createElement(url, "link");
if (css) {
head.appendChild(css);
this.Myload(head, css);
return css;
}
else {
return false;
}
},
//加载js
readyScript: function (head, url) {
var js = this.createElement(url, "script");
if (js) {
head.appendChild(js);
this.Myload(head, js);
return js;
}
else {
return false;
}
},
//加载成功后释放内存及执行方法
Myload: function (head, obj) {
this.done = false;
obj.onload = obj.onreadystatechange = function () {
if (!this.done && (!this.readyState ||
this.readyState === "loaded" ||
this.readyState === "complete")) {
this.done = true;
if (typeof this.callback == 'function') {
this.callback();
}
//IE内存泄露
obj.onload = obj.onreadystatechange = null;
if (head && obj.parentNode) {
head.removeChild(obj);
}
}
};
},
//创建元素
createElement: function (filename, filetype) {
switch (filetype) {
case 'script':
{
var scriptTag = document.createElement(filetype);
scriptTag.setAttribute('language', 'javascript');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.setAttribute('src', filename);
return scriptTag
}
break;
case 'link':
{
var styleTag = document.createElement(filetype);
styleTag.setAttribute('type', 'text/css');
styleTag.setAttribute('rel', 'stylesheet');
styleTag.setAttribute('href', filename);
return styleTag
}
break;
default:
return false;
break
}
},
//获取加载文件的类型
getType: function (data) {
data = data.replace(/^/s|/s$/g, "");
var m;
if (//./w+$/.test(data)) {
m = data.match(/([^]+)/.(/w+)$/);
if (m) {
if (m[2] == 'js') {
return {
filename: m[1],
ext: m[2],
tag: 'script'
}
} else if (m[2] == 'css') {
return {
filename: m[1],
ext: m[2],
tag: 'link'
}
} else {
return {
filename: m[1],
ext: m[2],
tag: null
}
}
} else {
return {
filename: null,
ext: null
}
}
}
else {
m = data.match(/([^]+)$/);
if (m) {
return {
filename: m[1],
ext: null,
tag: null
}
} else {
return {
filename: null,
ext: null,
tag: null
}
}
}
}
};
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>
http://www.jb51.net/article/41387.htm