zoukankan      html  css  js  c++  java
  • 动态加载CSS,JS文件

     1 var Head = document.getElementsByTagName('head')[0],style = document.createElement('style');
     2 //文件全部加载完成显示DOM
     3 function linkScriptDOMLoaded(parm){
     4     style.innerHTML = 'body{display:none}';//动态加载文件造成样式表渲染变慢,为了防止DOM结构在样式表渲染完成前显示造成抖动,先隐藏body,样式表读完再显示
     5     Head.insertBefore(style,Head.firstChild)
     6     var linkScript, linckScriptCount = parm.length, currentIndex = 0;  
     7     for ( var i = 0 ; i < parm.length; i++ ){
     8         if(/.css[^.]*$/.test(parm[i])) {
     9             linkScript = document.createElement("link");
    10             linkScript.type = "text/" + ("css");
    11             linkScript.rel = "stylesheet";
    12             linkScript.href = parm[i];
    13         } else {
    14             linkScript = document.createElement("script");
    15             linkScript.type = "text/" + ("javascript");
    16             linkScript.src = parm[i];
    17         }
    18         Head.insertBefore(linkScript, Head.lastChild)
    19         linkScript.onload = linkScript.onerror = function(){
    20             currentIndex++;
    21             if(linckScriptCount == currentIndex){
    22                 style.innerHTML = 'body{display:block}';
    23                 Head.insertBefore(style,Head.lastChild)
    24             }
    25         }
    26     }  
    27 }
    28 //异步加载css,js文件
    29 function linkScript(parm, fn) {
    30     var linkScript;
    31     if(/.css[^.]*$/.test(parm)) {
    32         linkScript = document.createElement("link");
    33         linkScript.type = "text/" + ("css");
    34         linkScript.rel = "stylesheet";
    35         linkScript.href = parm;
    36     } else {
    37         linkScript = document.createElement("script");
    38         linkScript.type = "text/" + ("javascript");
    39         linkScript.src = parm;
    40     }
    41     Head.insertBefore(linkScript, Head.lastChild)
    42     linkScript.onload = linkScript.onerror = function() {
    43         if(fn) fn()
    44     }
    45 }
    46  
    47  
    48  
    49 linkScriptDOMLoaded([
    50     "/content/bootstrap/assets/css/style.css",
    51     "/content/bootstrap/assets/css/bootstrap.css",
    52     "/content/bootstrap/assets/js/footable/css/footable.standalone.css"
    53 ])
    54 linkScript("/content/bootstrap/assets/css/entypo-icon.css")
    55 linkScript("/content/bootstrap/assets/css/font-awesome.css")
  • 相关阅读:
    https单向证书
    单例模式再学习
    sql经常出现死锁解决办法
    sqlserver结束和监视耗时的sql
    如何保持进步
    es6-学习
    javascript修改div大小遮挡页面渲染问题
    报表功能设计思考-初步尝试-第一次
    导出统计数据-经验积累-深入1
    Java中数据类型转换&基本类型变量和对象型变量
  • 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9565748.html
Copyright © 2011-2022 走看看