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

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

 

功能模块页面

 

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

 

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

1. // 添加link标签

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

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

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

5.     link.rel = "stylesheet";

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

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

8.     if (callback) {

9.         callback.call(link);

10.     }

11. }

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

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

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

15.         self.$_link = this; 

16.     })

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

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

19.     })

20. }else{

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

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

23.     }else{

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

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

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

27.     }

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

29. }

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

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

---

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

1. //构造器函数

2. function resLoader(config){

3.     this.option = {

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

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

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

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

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

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

10.     }

11.     if(config){

12.         for(i in config){

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

14.         }

15.     }

16.     else{

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

18.         return;

19.     }

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

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

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

23. };

 

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

26.     this.status = 1;

27.     var _this = this;

28.     var baseUrl = this.option.baseUrl;

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

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

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

32.             url = r;

33.         }

34.         else{

35.             url = baseUrl + r;

36.         }

 

38.         var image = new Image();

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

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

41.         image.src = url;

42.     }

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

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

45.     }

46. };

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

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

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

50.     }

51.     //加载完毕

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

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

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

55.         }

56.     }

57. };

58. var loader = new resLoader({

59.     resources : [

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

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

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

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

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

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

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

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

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

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

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

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

72.     ],

73.     onStart : function(total){

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

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

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

77.     },

78.     onProgress : function(current, total){

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

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

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

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

83.     },

84.     onComplete : function(total){

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

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

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

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

89.     }

90. });

91. loader.start();

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