动态加载 js css的类

浏览:2737 发布日期:2013/12/09 分类:功能实现 关键字: javascript 动态加载js 动态加载css
一个动态加载 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 < 535.23 and Firefox < 9.0
    // 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 < 536;
    // 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 < 536
        if(_self.isOldWebKit) {
            if(sheet) {
                isLoaded = true;
            }
        } else {
            if (sheet) {  // for Firefox < 9.0
                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 下载:30 次 )

评论( 相关
后面还有条评论,点击查看>>