动态加载/删除css文件以及图片预加载

动态加载/删除css文件以及图片预加载

 

功能模块页面

 

最近，工作中遇到了一个比较奇葩的需求：要在一个页面（PC端）增加一个功能模块，但是这个页面在不久之后要重构，为了新增加的模块可以继续复用，必须做到这个模块的样式对页面其他模块不能造成影响，旧版页面使用bootstrap样式，新版模块只使用normalize.css，UI组件使用sass重写，因为重构工作量太大，公司前端只有1+1个人，所以就想将模块样式独立，最后，用动态加载link标签解决。

 

上图为一个页面，所有模块通过哈希控制是否显示，新增了一个约标模块。附上自认为很low的解决方放：（欢迎指正不足）

1. // 添加link标签

1. this.loadCss = function(url, callback) {

1. var link = document.createElement('link');

1. link.type="text/css";

1. link.rel = "stylesheet";

1. link.href = url+'1';

1. document.getElementsByTagName('head')[0].appendChild(link);

1. if (callback) {

1. callback.call(link);

1. }

1. }

1. // 通过判断是否为新增模块

1. if("#" + relId == "#setup_12"){

1. self.loadCss('/css/v2.0/pc/new_main.css?v=201702231412', function(){

1. self.$_link = this;

1. })

1. self.loadCssComplete('/css/v2.0/pc/new_main.css?v=201702231412', function(){

1. $("#" + relId).show();  //判断css是够加载完成，如果完成则显示模块

1. })

1. }else{

1. if($.isEmptyObject(self.$_link)){

1. console.log($.isEmptyObject(self.$_link))

1. }else{

1. document.getElementsByTagName('head')[0].removeChild(self.$_link);

1. self.$_link = new Object();

1. window.location.reload();  // 在切换tabs时删除link标签并刷新避免缓冲造成影响

1. }

1. $("#" + relId).show();

1. }

将link标签添加到最后，避免bootstrap样式发生覆盖。

特此分享，希望对一些和我一样low的FED有帮助。

---

附上最近工作中用到的图片资源预加载并显示加载进度条代码：

1. //构造器函数

1. function resLoader(config){

1. this.option = {

1. resourceType : 'image', //资源类型，默认为图片

1. baseUrl : './', //基准url

1. resources : [], //资源路径数组

1. onStart : null, //加载开始回调函数，传入参数total

1. onProgress : null, //正在加载回调函数，传入参数currentIndex, total

1. onComplete : null //加载完毕回调函数，传入参数total

1. }

1. if(config){

1. for(i in config){

1. this.option[i] = config[i];

1. }

1. }

1. else{

1. alert('参数错误！');

1. return;

1. }

1. this.status = 0; //加载器的状态，0：未启动   1：正在加载   2：加载完毕

1. this.total = this.option.resources.length || 0; //资源总数

1. this.currentIndex = 0; //当前正在加载的资源索引

1. };

 

1. resLoader.prototype.start = function(){

1. this.status = 1;

1. var _this = this;

1. var baseUrl = this.option.baseUrl;

1. for(var i=0,l=this.option.resources.length; i<l; i++){

1. var r = this.option.resources[i], url = '';

1. if(r.indexOf('http://')===0 || r.indexOf('https://')===0){

1. url = r;

1. }

1. else{

1. url = baseUrl + r;

1. }

 

1. var image = new Image();

1. image.onload = function(){_this.loaded();};

1. image.onerror = function(){_this.loaded();};

1. image.src = url;

1. }

1. if(isFunc(this.option.onStart)){

1. this.option.onStart(this.total);

1. }

1. };

1. resLoader.prototype.loaded = function(){

1. if(isFunc(this.option.onProgress)){

1. this.option.onProgress(++this.currentIndex, this.total);

1. }

1. //加载完毕

1. if(this.currentIndex===this.total){

1. if(isFunc(this.option.onComplete)){

1. this.option.onComplete(this.total);

1. }

1. }

1. };

1. var loader = new resLoader({

1. resources : [

1. 'https://xxxyun.com/ydimg/theme/thanksgiving/logo.png',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/ydlogo.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/logo01.png',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/loading_icon.png',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/go.png',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/page_detail01.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/page_detail02.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/page1_bg.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/recivepage_bg01s.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/recivepage_bg02.jpg',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/share.png',

1. 'https://xxxyun.com/ydimg/theme/2017/01/cutprice/share_path.png'

1. ],

1. onStart : function(total){

1. self.$loadingId.innerText='0%';

1. self.$loadingIcon.style.left = '0%';

1. self.$loadingCon.style.width = '0%';

1. },

1. onProgress : function(current, total){

1. var percent =Math.floor(current/total*100);

1. self.$loadingId.innerText=percent + '%';

1. self.$loadingIcon.style.left = percent + '%';

1. self.$loadingCon.style.width = percent + '%';

1. },

1. onComplete : function(total){

1. self.$loadingId.innerText='100%';

1. self.$loadingIcon.style.left = '100%';

1. self.$loadingCon.style.width = '100%';

1. document.getElementById('page_loading').style.display = 'none';

1. }

1. });

1. loader.start();

一枚不会写文章的程序员~