下面小编就为大家带来一篇动态加载 js、CSS 的简单实现代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
一、原生 js:
二、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') >=0 ? 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 的简单实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0225/265448.html