動(dòng)態(tài)加載js、css的實(shí)例代碼
更新時(shí)間:2016年05月26日 09:06:44 作者:囧俠
這篇文章主要介紹了動(dòng)態(tài)加載js、css的實(shí)例代碼的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,感興趣的朋友一起看看吧
一、原生js:
/** * 加載js和css文件 * @param jsonData.path 前綴路徑 * @param jsonData.url 需要加載的js路徑或css路徑 * @param jsonData.type 需要加載的類型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.type == "js") { document.writeln("<script type='text/javascript' src='"+ jsonData.path + jsonData.url+"'></script>"); } else if(jsonData.type == "css") { document.writeln("<link rel='stylesheet' href='"+jsonData.path + jsonData.url+"' type='text/css' />"); } } /** * 加載js或css到head中 * @param jsonData.path 前綴路徑 * @param jsonData.url 需要加載的js路徑或css路徑 * @param jsonData.type 需要加載的類型 js或css */ function loadFilesToHead(jsonData) { jsonData.path = jsonData.path != undefined ? jsonData.path : ""; if(jsonData.type == "js") { var _js = document.createElement("script"); _js.setAttribute("type", "text/javascript"); _js.setAttribute("src", jsonData.path + jsonData.url); _js.onload = _js.onreadystatechange=function(){ if(!this.readyState||this.readyState=='loaded'||this.readyState=='complete'){ if("function" == typeof(jsonData["callback"]) && jsonData["callback"]){ jsonData["callback"].call(this); } } _js.onload=_js.onreadystatechange=null; } document.getElementsByTagName("head")[].appendChild(_js);//追加到head標(biāo)簽內(nèi) } else if(jsonData.type == "css") { var _css = document.createElement("link"); _js.setAttribute("type", "text/css"); _css.setAttribute("rel", "stylesheet"); _css.setAttribute("href", jsonData.path + jsonData.url); document.getElementsByTagName("head")[].appendChild(_css);//追加到head標(biāo)簽內(nèi) } }
二、jquery版本:
采用deferred對(duì)象返回結(jié)果
var uiLoad = uiLoad || {}; (function($, $document, uiLoad) { "use strict"; var loaded = [], promise = false, deferred = $.Deferred(); uiLoad.load = function (srcs) { srcs = $.isArray(srcs) ? srcs : srcs.split(/\s+/); if(!promise){ promise = deferred.promise(); } $.each(srcs, function(index, src) { promise = promise.then( function(){ return src.indexOf('.css') >= ? loadCSS(src) : loadScript(src); } ); }); deferred.resolve(); return promise; }; var loadScript = function (src) { if(loaded[src]) return loaded[src].promise(); var deferred = $.Deferred(); var script = $document.createElement('script'); script.src = src; script.onload = function (e) { deferred.resolve(e); }; script.onerror = function (e) { deferred.reject(e); }; $document.body.appendChild(script); loaded[src] = deferred; return deferred.promise(); }; var loadCSS = function (href) { if(loaded[href]) return loaded[href].promise(); var deferred = $.Deferred(); var style = $document.createElement('link'); style.rel = 'stylesheet'; style.type = 'text/css'; style.href = href; style.onload = function (e) { deferred.resolve(e); }; style.onerror = function (e) { deferred.reject(e); }; $document.head.appendChild(style); loaded[href] = deferred; return deferred.promise(); } })(jQuery, document, uiLoad);
以上所述是小編給大家介紹的動(dòng)態(tài)加載js、css的實(shí)例代碼,希望對(duì)大家有所幫助!
您可能感興趣的文章:
- 學(xué)習(xí)javascript文件加載優(yōu)化
- 理解Javascript文件動(dòng)態(tài)加載
- JS 動(dòng)態(tài)加載js文件和css文件 同步/異步的兩種簡(jiǎn)單方式
- JS加載器如何動(dòng)態(tài)加載外部js文件
- 動(dòng)態(tài)加載js、css的簡(jiǎn)單實(shí)現(xiàn)代碼
- 動(dòng)態(tài)加載js文件簡(jiǎn)單示例
- jquery及js實(shí)現(xiàn)動(dòng)態(tài)加載js文件的方法
- 如何動(dòng)態(tài)加載外部Javascript文件
- js實(shí)現(xiàn)動(dòng)態(tài)加載腳本的方法實(shí)例匯總
- 不使用script導(dǎo)入js文件的幾種方法
- 動(dòng)態(tài)加載JavaScript文件的3種方式
相關(guān)文章
微信瀏覽器左上角返回按鈕監(jiān)聽(tīng)的實(shí)現(xiàn)
這篇文章主要介紹了微信瀏覽器左上角返回按鈕監(jiān)聽(tīng)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03全面接觸神奇的Bootstrap導(dǎo)航條實(shí)戰(zhàn)篇
導(dǎo)航條(navbar)在Bootstrap中是一個(gè)獨(dú)立組件,導(dǎo)航條(navbar)和導(dǎo)航(nav)在Bootstrap中是有明顯區(qū)別的,本文全面接觸神奇的Bootstrap導(dǎo)航條,感興趣的小伙伴們可以參考一下2016-08-08JavaScript常用內(nèi)置對(duì)象用法分析
這篇文章主要介紹了JavaScript常用內(nèi)置對(duì)象用法,簡(jiǎn)單總結(jié)分析了javascript String對(duì)象、Date對(duì)象、Math類、數(shù)組對(duì)象等常見(jiàn)對(duì)象的相關(guān)功能、方法與使用注意事項(xiàng),需要的朋友可以參考下2019-07-07以BootStrap Tab為例寫(xiě)一個(gè)前端組件
本文以Bootstrap標(biāo)簽頁(yè)組件為例,介紹如何編寫(xiě)或者封裝一個(gè)前端組件,具體示例代碼大家參考下本文2017-07-07淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)
下面小編就為大家?guī)?lái)一篇淺談JS運(yùn)算符&&和|| 及其優(yōu)先級(jí)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08