動態加載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); });