动态加载CSS、JS

动态加载CSS、JS文件,并为JS加载添加回调函数。

代码如下:

$.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 );
                });
            }
        });            
    }
});

调用方法:

$.addLink(['jquery.easing.min.js','base.js','base.css'],'test/',function(url,status,resource){
    // 此回调函数仅对JS加载有效。
    console.log(url);
    // console.log(status);
    // console.log(resource);
});

 

posted @ 2017-05-10 16:31  BarryChen89  阅读(147)  评论(0编辑  收藏  举报