动态加载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); });