動態加載CSS、JS

動態加載CSS、JS文件,併爲JS加載添加回調函數。javascript

代碼以下:css

$.extend({
    /**
     * 動態添加JS,CSS
     * @param {Array} urls : 連接地址
     * @param {String} urlPath : 連接目錄地址
     * @param {Function} callback : 加載完成回調(文件地址, 狀態,文件內容)(僅對JS有效)
     */
    addLink:function(urls,urlPath,callback){
        var argNum = arguments.length,
            $container = $('head'),
            fileType,fileUrl,$obj;
        // 異常數據時返回
        if( argNum == 0 || urls.length == 0){
            return;
        }

        _urls = arguments[0];
        // 初始化目錄地址以及回調函數
        _urlPath = ( arguments[1] && ( typeof arguments[1] === "string" ) ) ? arguments[1] : '';
        _callback = arguments[2] ? arguments[2] : 
                ( arguments[1] && ( typeof arguments[1] === "function" ) ) ? arguments[1] : {};

        $.each(_urls,function( i, data ){
            fileUrl = data.split('.'),fileType = fileUrl[fileUrl.length-1].toLowerCase();
            if( fileType == 'css' ){
                $obj = $('<link>').attr({
                    'href':_urlPath+data,'type':'text/css','rel':'stylesheet'});
            }else{
                $obj = $('<script>').attr({'src':_urlPath+data,'type':'text/javascript'});
            }
            $container.append($obj);
            if( fileType == 'js' ){
                $.getScript( _urlPath + data )
                  .done(function( script, textStatus ) {
                    _callback(data,textStatus,script);
                  })
                  .fail(function( jqxhr, settings, exception ) {
                    console.warn( '沒法獲取加載資源:'+data );
                });
            }
        });            
    }
});

調用方法:java

$.addLink(['jquery.easing.min.js','base.js','base.css'],'test/',function(url,status,resource){
    // 此回調函數僅對JS加載有效。
    console.log(url);
    // console.log(status);
    // console.log(resource);
});
相關文章
相關標籤/搜索