动态加载引入js外部文件来提高网页加载速度 原创

动态加载引入js外部文件来提高网页加载速度

复制javascript/**
 * Function: 统一加载静态资源css与js-累行客
 * Author: luolei
 * Version: V1.1.9
 * UpdateTime：2020-02-08
 * Explain:
 */

//基本路径
var baseUrl = "http://localhost";
/*baseUrl = "http://www.leixing.xyz";*/

/*******************************配置每个页面所需的css路径 start********************************/
//公用的css
var css_base = [
    baseUrl + '/plugins/bootstrap/css/bootstrap.min.css',
    baseUrl + '/plugins/layui-2.4.2/layui/css/layui.css',
    baseUrl + '/plugins/layer/skin/layer.css',
    baseUrl + '/css/base.css'
];
//公用的js
var js_base = [
    baseUrl + '/plugins/jquery/jquery-2.2.3.min.js',
    baseUrl + '/plugins/bootstrap/js/bootstrap.js',
    baseUrl + '/plugins/layui-2.4.2/layui/layui.js',
    baseUrl + '/plugins/layer/layer.min.js',
    baseUrl + '/js/base.js'
];

//首页的
var css_index = [
    baseUrl + '/css/article.css',
    baseUrl + '/css/index.css',
    baseUrl + '/plugins/alibaba_iconfont/iconfont.css'
];
var js_index = [
    baseUrl + '/js/left.js',
    baseUrl + '/js/right.js',
    baseUrl + '/js/index.js'
];

//详情页
var css_detail = [
    baseUrl + '/css/article.css',
    baseUrl + '/css/details.css',
    baseUrl + '/plugins/highlightJS/styles/github.css',
    baseUrl + '/plugins/wangEditor/wangEditor.css',
    baseUrl + '/plugins/alibaba_iconfont/iconfont.css'
];
var js_detail = [
    baseUrl + '/plugins/wangEditor/js/wangEditor.js',
    baseUrl + '/js/article.js',
    baseUrl + '/js/right.js',
    baseUrl + '/js/index.js',
    baseUrl + '/js/detail.js',
    baseUrl + '/plugins/wordexport/FileSaver.js',
    baseUrl + '/plugins/wordexport/jquery.wordexport.js'
];

//移动机，文章样式
var css_mobile_article= [
    baseUrl + '/css/mobile/article.css'
];

/*******************************配置每个页面所需的css路径 end********************************/
/**
 * 加载css
 * @param url
 */
function dynamicLoadCss(url) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    link.href = url;
    head.appendChild(link);
}
/**
 * 加载js文件
 * @param url
 */
function dynamicLoadJs(url) {
    var script ='<script type="text/javascript" src="'+url+'"></script>';
    document.write(script);
}

//var a = [1,2,3]; var b = [4,5,6]; var c = a.concat(b);//c=[1,2,3,4,5,6]

/**
 * 传入页面，加载对应页面的css
 * @param page
 */
function loadCss(page){
    var csslen;
    var cssTags;
    var css;
    if(page == 'index'){ //debugger
        css = css_base.concat(css_index);
    }else if(page == 'detail'){
        css = css_base.concat(css_detail);
    }
    csslen = css.length;
    cssTags = new Array(css);
    for (var i = 0; i < csslen; i++) {
        dynamicLoadCss(css[i]);
    }
    //移动端
    if(!isPC()){ //debugger
        for (var i = 0; i < css_mobile_article.length; i++)
            dynamicLoadCss(css_mobile_article[i]);
    }
 }

/**
 * 传入页面，加载对应页面的css
 * @param page
 */
function loadJS(page){
    var jslen;
    var jsTags;
    var js;
    if(page == 'index'){ //debugger
        js = js_base.concat(js_index);
    }else if(page == 'detail'){ //debugger
        js = js_base.concat(js_detail);
    }
    jslen = js.length;
    jsTags = new Array(js);
    for (var i = 0; i < jslen; i++) {
        dynamicLoadJs(js[i]);
    }
    //加载广告
    if(page == 'index' || page == 'detail') load_advert(page, 500);

}

/**
 * 加载页面的CSS和JS
 * @param page
 */
function loadCssAndJS(page){
    loadCss(page);
    loadJS(page);
}

/**
 * 判断是不是电脑
 * @returns {boolean} true是电脑 false不是电脑
 */
function isPC() {
    //用JS来判断页面是在手机端还是在PC端打开的方法，正则表达式
    if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        return false;
    } else {
        return true;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157