动态加载js、css 代码
一、原生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")[0].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")[0].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') >=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 代码的更多相关文章
- 动态加载js css 插件
简介 动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两 ...
- 页面加载异常 清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法 一.CSS和 ...
- js动态加载js css文件,可以配置文件后辍,防止浏览器缓存
js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可 源码如下: /** * js动态加载js css ...
- 动态加载js,css
今天项目中需要用到动态加载 CSS 文件,经过一番折腾终于搞定,回家整理了一下,顺便融合了动态加载 JS 的功能写成了一个对象,先上代码: var dynamicLoading = { css: fu ...
- 动态加载js,css(项目中需要的)
最近做的一个项目需要加入百度统计,大家都知道百度统计在页面引用就是一坨js,实现方法很简单引用到页面就ok了. 那么问题来了,虽然我不知道百度统计的原理是啥,我的测试服引用了百度统计,百度统计账号里面 ...
- jquery动态加载js/css文件方法
先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...
- JS动态加载 js css
1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...
- 动态加载js和css
开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { v ...
- 动态加载js和css的jquery plugin
一个简单的动态加载js和css的jquery代码,用于在生成页面时通过js函数加载一些共通的js和css文件. //how to use the function below: //$.include ...
- 三种动态加载js的jquery实例代码另附去除js方法
!-- 这里为你提供了三种动态加载js的jquery实例代码哦,由于jquery是为用户提供方便的,所以利用jquery动态加载文件只要一句话$.getscript("test.js&quo ...
随机推荐
- vijosP1115 火星人
vijosP1115 火星人 链接:https://vijos.org/p/1115 [思路] 排列组合. 题目要求为求第下m个排列. 这里有两种方法,首选的是调用algorithm中的next_pe ...
- 可在Azure上运行.NET的SDK
本节包含前几个版本的 for .NET 的发行说明.有关早期版本的详细信息,请参阅早期版本:Azure SDK for .NET.有关 SDK 支持和停用的信息,请参阅 Azure SDK for . ...
- 《Concrete Mathematics》-chaper5-二项式系数
二项式系数,也是我们常用的组合数,最直观的组合意义就是从n个元素取k个元素所有可能的情况数,因此我们自然的得到下面二项式系数的定义式. 那么我们通过具有组合意义的二项系数,给出更加一般的二项式系数的定 ...
- Codeforces Round #226 (Div. 2)C. Bear and Prime Numbers
/* 可以在筛选质数的同时,算出每组数据中能被各个质数整除的个数, 然后算出[0,s]的个数 [l,r] 的个数即为[0,r]的个数减去[0,l]个数. */ #include <stdio.h ...
- Qt5.0.2无法发布问题
先从bin目录里面找到所缺失的dll,如果出现 可以找到libEGL.dll然后复制过来就可以了.
- 杀死当前Excel进程
说明: 代码编写过程中,有时需要杀死当前Excel进程,而不影响其他Excel进程. 代码如下: 添加引用: //杀死当前进程的API引用 using System.Runtime.InteropSe ...
- 如何用Java进行3DES加密解
原文地址: http://weavesky.com/2008/01/05/java-3des/ 最近一个合作商提出使用3DES交换数据,本来他们有现成的代码,可惜只有.net版本,我们的服务器都是Li ...
- Mac RTX
http://bbs.weiphone.com/read-htm-tid-1876850.html 公司的rtx还是2010的,如果是2011的就有mac版的了.直接到官网下. 那还是用2010的,尼 ...
- [Javascript] Gradient Fills on the HTML5 Canvas
window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...
- 深入理解Linux操作系统守护进程的意义
Linux服务器在启动时需要启动很多系统服务,它们向本地和网络用户提供了Linux的系统功能接口,直接面向应用程序和用户.提供这些服务的程序是由运行在后台的守护进程(daemons)来执行的.守护进程 ...