js异步加载css

----------------------------------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’);

</script>

yepnope是一个异步有条件的js/css加载器，并且可以只下载用户所需的资源。

典型代码示例

yepnope({
  test : Modernizr.geolocation,
  yep  : 'normal.js',
  nope : ['polyfill.js', 'wrapper.js']
});

当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