动态加载 js css的类
程序员文章站
2024-04-03 13:24:52
...
一个动态加载 js 和 css 的类
虽然很少用,但是还是用到了
自己改的
虽然很少用,但是还是用到了
自己改的
/**
* YLoader
* 动态加载 js css
* 用法
*
* var yLoader = new YLoader();
*
* 1. 动态加载js
* yLoader.use('http://xxx.com/static/js/jquery.js');
* 2. 动态加载js后执行方法
* yLoader.use('http://xxx.com/static/js/jquery.js', function(){...});
* 3. 动态加载css
* yLoader.use('http://xxx.com/static/css/home.css');
*/
function YLoader() {
this.doc = document;
this.IS_CSS_REG = /\.css(?:\?|$)/i;
this.READY_STATE_REG = /^(?:loaded|complete|undefined)$/;
// bug fix
// `onload` event is not supported in WebKit
// ref:
// - https://bugs.webkit.org/show_activity.cgi?id=38995
// - https://bugzilla.mozilla.org/show_bug.cgi?id=185236
// - https://developer.mozilla.org/en/HTML/Element/link#Stylesheet_load_events
this.isOldWebKit = (window.navigator.userAgent.replace(/.*AppleWebKit\/(\d+)\..*/, "$1")) * 1
// For some cache cases in IE 6-8, the script executes IMMEDIATELY after
// the end of the insert execution, so use `currentlyAddingScript` to
// hold current node
this.currentlyAddingScript = '';
this.head = this.doc.getElementsByTagName('head')[0];
// ref: #185 & http://dev.jquery.com/ticket/2709
this.baseElement = this.head.getElementsByTagName("base")[0];
}
YLoader.prototype = {
constructor : YLoader
,isFunction : function(fn) {
return "[object Function]" === Object.prototype.toString.call(fn);
}
,pollCss : function(node, callback) {
var _self = this;
var sheet = node.sheet;
var isLoaded = false;
// for WebKit
if(_self.isOldWebKit) {
if(sheet) {
isLoaded = true;
}
} else {
if (sheet) { // for Firefox
try {
if(sheet.cssRules) {
isLoaded = true;
}
} catch (ex) {
// The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"
// to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0
// in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"
if(ex.name === "NS_ERROR_DOM_SECURITY_ERR") {
isLoaded = true;
}
}
}
}
setTimeout(function() {
if (isLoaded) {
// Place callback here to give time for style rendering
_self.isFunction(callback) && callback();
} else {
_self.pollCss(node, callback);
}
}, 50);
}
,addOnload : function(node, callback, isCss) {
var _self = this;
var missingOnload = isCss && (_self.isOldWebKit || !("onload" in node));
// for Old WebKit and Old Firefox
if(missingOnload) {
setTimeout(function() {
_self.pollCss(node, callback);
}, 10); // Begin after node insertion
return;
}
node.onload = node.onerror = node.onreadystatechange = function() {
if(_self.READY_STATE_REG.test(node.readyState)) {
// Ensure only run once and handle memory leak in IE
node.onload = node.onerror = node.onreadystatechange = null;
// Remove the script to reduce memory leak
if(!isCss) {
_self.head.removeChild(node);
}
// Dereference the node
node = null;
_self.isFunction(callback) && callback();
}
};
}
,use : function(url, callback, charset) {
var isCss = this.IS_CSS_REG.test(url);
var node = this.doc.createElement(isCss ? "link" : "script");
if(undefined != charset) {
node.charset = charset;
}
this.addOnload(node, callback, isCss);
if (isCss) {
node.rel = "stylesheet";
node.href = url;
} else {
node.async = true;
node.src = url;
}
this.currentlyAddingScript = node;
// ref: #185 & http://dev.jquery.com/ticket/2709
this.baseElement ?
this.head.insertBefore(node, this.baseElement) :
this.head.appendChild(node);
this.currentlyAddingScript = null;
}
};
YLoader.js.rar ( 1.64 KB 下载:20 次 )
AD:真正免费,域名+虚机+企业邮箱=0元
推荐阅读
-
动态加载 js css的类
-
一个有一个css文件一个js文件的html页面被访问时chrome会建立几个TCP连接?发起几次htttp请求?
-
CSS第一次加载失效的问题_html/css_WEB-ITnose
-
php类的注册与自动加载__autoload
-
PHP类中动态方法和静态方法调用写法的疑惑,希望版主大大指导
-
动态加载js和css(外部文件)_javascript技巧
-
Django如何加载css和js文件以及静态图片
-
JS动态添加Table的TR,TD实现方法_javascript技巧
-
PHP类中动态方法和静态方法调用写法的不解,希望版主大大指导
-
Yii安装EClientScript插件扩展实现css,js文件代码压缩合并加载功能