动态加载CSS,JS文件

动态加载CSS,JS文件
https://www.cnblogs.com/yuwenjing0727/p/9565748.html

var Head = document.getElementsByTagName('head')[0],style = document.createElement('style');
//文件全部加载完成显示DOM
function linkScriptDOMLoaded(parm){
    style.innerHTML = 'body{display:none}';//动态加载文件造成样式表渲染变慢,为了防止DOM结构在样式表渲染完成前显示造成抖动,先隐藏body,样式表读完再显示
    Head.insertBefore(style,Head.firstChild)
    var linkScript, linckScriptCount = parm.length, currentIndex = 0;  
    for ( var i = 0 ; i < parm.length; i++ ){
        if(/\.css[^\.]*$/.test(parm[i])) {
            linkScript = document.createElement("link");
            linkScript.type = "text/" + ("css");
            linkScript.rel = "stylesheet";
            linkScript.href = parm[i];
        } else {
            linkScript = document.createElement("script");
            linkScript.type = "text/" + ("javascript");
            linkScript.src = parm[i];
        }
        Head.insertBefore(linkScript, Head.lastChild)
        linkScript.onload = linkScript.onerror = function(){
            currentIndex++;
            if(linckScriptCount == currentIndex){
                style.innerHTML = 'body{display:block}';
                Head.insertBefore(style,Head.lastChild)
            }
        }
    }  
}
//异步加载css,js文件
function linkScript(parm, fn) {
    var linkScript;
    if(/\.css[^\.]*$/.test(parm)) {
        linkScript = document.createElement("link");
        linkScript.type = "text/" + ("css");
        linkScript.rel = "stylesheet";
        linkScript.href = parm;
    } else {
        linkScript = document.createElement("script");
        linkScript.type = "text/" + ("javascript");
        linkScript.src = parm;
    }
    Head.insertBefore(linkScript, Head.lastChild)
    linkScript.onload = linkScript.onerror = function() {
        if(fn) fn()
    }
}
 
 
 
linkScriptDOMLoaded([
    "/content/bootstrap/assets/css/style.css",
    "/content/bootstrap/assets/css/bootstrap.css",
    "/content/bootstrap/assets/js/footable/css/footable.standalone.css"
])
linkScript("/content/bootstrap/assets/css/entypo-icon.css")
linkScript("/content/bootstrap/assets/css/font-awesome.css")
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值