动态加载 js css的类
- WBOYOriginal
- 2016-06-07 11:43:061258browse
一个动态加载 js 和 css 的类
虽然很少用，但是还是用到了
自己改的/**<br>
* YLoader<br>
* 动态加载 js css <br>
* 用法<br>
*<br>
* var yLoader = new YLoader();<br>
*<br>
* 1. 动态加载js<br>
* yLoader.use('http://xxx.com/static/js/jquery.js');<br>
* 2. 动态加载js后执行方法<br>
* yLoader.use('http://xxx.com/static/js/jquery.js', function(){...});<br>
* 3. 动态加载css<br>
* yLoader.use('http://xxx.com/static/css/home.css');<br>
*/<br>
function YLoader() {<br>
this.doc = document;<br>
this.IS_CSS_REG = /\.css(?:\?|$)/i;<br>
this.READY_STATE_REG = /^(?:loaded|complete|undefined)$/;<br>
<br>
// bug fix<br>
// `onload` event is not supported in WebKit
// ref:<br>
// - https://bugs.webkit.org/show_activity.cgi?id=38995<br>
// - https://bugzilla.mozilla.org/show_bug.cgi?id=185236<br>
// - https://developer.mozilla.org/en/HTML/Element/link#Stylesheet_load_events<br>
this.isOldWebKit = (window.navigator.userAgent.replace(/.*AppleWebKit\/(\d+)\..*/, "$1")) * 1
// For some cache cases in IE 6-8, the script executes IMMEDIATELY after<br>
// the end of the insert execution, so use `currentlyAddingScript` to<br>
// hold current node<br>
this.currentlyAddingScript = '';<br>
this.head = this.doc.getElementsByTagName('head')[0];<br>
// ref: #185 & http://dev.jquery.com/ticket/2709<br>
this.baseElement = this.head.getElementsByTagName("base")[0];<br>
}<br>
YLoader.prototype = {<br>
constructor : YLoader<br>
,isFunction : function(fn) {<br>
return "[object Function]" === Object.prototype.toString.call(fn);<br>
}<br>
,pollCss : function(node, callback) {<br>
var _self = this;<br>
var sheet = node.sheet;<br>
var isLoaded = false;<br>
<br>
// for WebKit
if(_self.isOldWebKit) {<br>
if(sheet) {<br>
isLoaded = true;<br>
}<br>
} else {<br>
if (sheet) { // for Firefox
try {<br>
if(sheet.cssRules) {<br>
isLoaded = true;<br>
}<br>
} catch (ex) {<br>
// The value of `ex.name` is changed from "NS_ERROR_DOM_SECURITY_ERR"<br>
// to "SecurityError" since Firefox 13.0. But Firefox is less than 9.0<br>
// in here, So it is ok to just rely on "NS_ERROR_DOM_SECURITY_ERR"<br>
if(ex.name === "NS_ERROR_DOM_SECURITY_ERR") {<br>
isLoaded = true;<br>
}<br>
}<br>
}<br>
}<br>
<br>
setTimeout(function() {<br>
if (isLoaded) {<br>
// Place callback here to give time for style rendering<br>
_self.isFunction(callback) && callback();<br>
} else {<br>
_self.pollCss(node, callback);<br>
}<br>
}, 50);<br>
}<br>
,addOnload : function(node, callback, isCss) {<br>
var _self = this;<br>
var missingOnload = isCss && (_self.isOldWebKit || !("onload" in node));<br>
// for Old WebKit and Old Firefox<br>
if(missingOnload) {<br>
setTimeout(function() {<br>
_self.pollCss(node, callback);<br>
}, 10); // Begin after node insertion<br>
return;<br>
}<br>
<br>
node.onload = node.onerror = node.onreadystatechange = function() {<br>
if(_self.READY_STATE_REG.test(node.readyState)) {<br>
// Ensure only run once and handle memory leak in IE<br>
node.onload = node.onerror = node.onreadystatechange = null;<br>
// Remove the script to reduce memory leak<br>
if(!isCss) {<br>
_self.head.removeChild(node);<br>
}<br>
// Dereference the node<br>
node = null;<br>
_self.isFunction(callback) && callback();<br>
}<br>
};<br>
}<br>
,use : function(url, callback, charset) {<br>
var isCss = this.IS_CSS_REG.test(url);<br>
var node = this.doc.createElement(isCss ? "link" : "script");<br>
if(undefined != charset) {<br>
node.charset = charset;<br>
}<br>
this.addOnload(node, callback, isCss);<br>
if (isCss) {<br>
node.rel = "stylesheet";<br>
node.href = url;<br>
} else {<br>
node.async = true;<br>
node.src = url;<br>
}<br>
this.currentlyAddingScript = node;<br>
<br>
// ref: #185 & http://dev.jquery.com/ticket/2709<br>
this.baseElement ?<br>
this.head.insertBefore(node, this.baseElement) :<br>
this.head.appendChild(node);<br>
<br>
this.currentlyAddingScript = null;<br>
}<br>
};
YLoader.js.rar
( 1.64 KB 下载：20 次 )
AD：真正免费，域名+虚机+企业邮箱=0元