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

时间：2023-03-08 17:34:23
动态加载/删除css文件以及图片预加载
动态加载/删除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. ],
  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();
一枚不会写文章的程序员~