创建script、link标签，预加载js/css方法createStaticResourceElement(CSRE)
创建script、link标签，预加载js/css方法createStaticResourceElement(CSRE)
IMWeb前端团队
发布于 2017-12-29 11:52:23
发布于 2017-12-29 11:52:23
# 代码
create-static-resource.js
/**
* Created by Capricorncd 2017-09-25
* https://github.com/capricorncd
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && (define.amd || define.cmd) ? define(factory) :
global.CSRE = factory();
}(this, function () {
'use strict';
var CODES = {
1: 'This paths is not an array'
}
// var DEFAULTS = {
// // 资源地址
// paths: [],
// // css link插入位置
// linkInsert: 'head',
// // script插入位置
// scriptInsert: 'body'
// // loadend: function () {
// // },
// // error: function (el) {
// // }
// }
// constructor
// Create Static Resource Element
function CSRE(opts) {
this.opts = opts;
this.createStaticElements(function () {
opts.loadend && opts.loadend();
})
}
var fn = CSRE.prototype;
// 创建Elements
fn.createStaticElements = function (callback) {
// 判断this.paths是否为数组
if (!this.opts.paths || !this.opts.paths instanceof Array) {
callback({
code: 1,
msg: CODES[1]
});
return;
}
var _this = this;
// 数组长度
var len = this.opts.paths.length;
// 已处理完成数量
var count = 0;
// 只处理js, css文件
for (var i = 0; i < len; i++) {
var val = this.opts.paths[i];
if (/\w+\.js/.test(val)) {
this.createScriptElement(val, loadEnd, loadError);
}
if (/\w+\.css/.test(val)) {
this.createLinkElement(val, loadEnd, loadError);
}
} // end of for
function loadEnd(el) {
count++;
if (count === len) callback();
// console.log(el);
}
function loadError(el) {
_this.opts.error && _this.opts.error(el);
count++;
if (count === len) callback();
}
}
// 创建script元素节点
fn.createScriptElement = function (src, loadend, loadErr) {
var el = this.opts.scriptInsert || 'body';
var script= document.createElement('script');
if (script.addEventListener) {
script.addEventListener("load", function (e) {
loadend(this);
}, false);
script.addEventListener("error", function (e) {
loadErr(this);
}, false);
} else if (script.attachEvent) {
script.attachEvent("onreadystatechange", function () {
var target = window.event.srcElement;
if (target.readyState === "loaded" || target.readyState === "complete") {
loadend.call(target);
} else {
loadErr.call(target);
}
});
}
if (window.jQuery) {
jQuery(el).append(script);
} else {
document.querySelector(el).appendChild(script);
}
script.src = src;
}
// 创建link(style)元素节点
fn.createLinkElement = function (href, loadend, loadErr) {
var el = this.opts.linkInsert || 'head';
// <link href="./static/css/common.min.css" rel="stylesheet" type="text/css">
var link = document.createElement('link');
link.href = href;
link.setAttribute('rel', 'stylesheet');
link.setAttribute('type', 'text/css');
if (window.jQuery) {
jQuery(el).append(link);
} else {
document.querySelector(el).appendChild(link);
}
link.onload = function () {
loadend(this);
}
link.onerror = function () {
loadErr(this);
}
}
return CSRE;
}));# 使用
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Create Static Resource Element</title>
</head>
<body>
<div id="app">
<h1>DEMO</h1>
<div>Create Static Resource Element</div>
</div>
<script src="create-static-resource.js"></script>
<script>
var Csre = new CSRE({
// 静态资源相对路径或url
paths: [
// js、css url或资源路径
'https://www.baidu.com/css/common.201709251646.css',
'https://www.baidu.com/js/common.201709251646.js',
'https://www.baidu.com/js/plugins.201709251646.js'
],
loadend: function () {
// 加载完成
},
error: function (errElement) {
// 每次onerror均会输出
},
// link元素插入位置(可选参数)
// 默认值 head，即添加到head内
linkInsert: 'head',
// script元素插入位置(可选参数)
// 默认值 body，即添加到body内
scriptInsert: 'body'
});
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录