一、原生js:
/** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param jsonData.type 需要加载的类型 js或css */ function loadWriteFiles(jsonData) { jsonData.path = jsonData.path != undefined ""; 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 ""; 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标签内 } 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标签内 } }
二、jquery版本:
采用deferred对象返回结果
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);
以上所述是小编给大家介绍的动态加载js、css的实例代码,希望对大家有所帮助!
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 周冰倩1995《沧桑情歌》JVC日本录制[WAV+CUE]
- 辛禄乐队.2024-热烈的少年【星辰】【FLAC分轨】
- 成龙.1996-龙的心【滚石】【WAV+CUE】
- 童安格.1991-一世情缘【宝丽金】【WAV+CUE】
- 韩红2010-擦肩而过[央金玛][WAV+CUE]
- RiccardoTesi-UnballoLiscio,Vol.II(2024)[24-48]FLAC
- 金池VS刘罡2009《双声情》[WAV+CUE]
- 冯奥迪《卄》[320K/MP3][67.08MB]
- 冯奥迪《卄》[FLAC/分轨][172.46MB]
- Merryland《Merryland》[320K/MP3][69.48MB]
- 苏芮.1991-停在我心里的温柔【福茂】【WAV+CUE】
- 苏慧伦.2020-面面Every.Side.of.Me【相信音乐】【WAV+CUE】
- 群星.1991-不一样的感觉REMIX【宝丽金】【WAV+CUE】
- 银霞.1983-《你那好冷的小手》珍藏纪念版[WAV分轨]
- 银霞.2002-《国语巨星专辑VOL.3》2CD台湾版[WAV+CUE]