YUI 阻止动态css加载

skinnable动态加载

在YUI Module中,经常采用skinnable参数来动态加载css,如:

YUI().use('w-paginator', function(Y) {
}, required: [], skinnable: true);

YUI Config中配置的参数如

skin: {
    defaultSkin: 'sam',
    base: 'assets/skins/'
}

非override情况下,默认的css模块的加载路径和模块名称为:

SKIN_PREFIX = 'skin-';
 
name: SKIN_PREFIX + {skin.defaultSkin} + '-'  + {modname} 
path: {modname}/{skin.base}/{skin.defaultSkin}/{modname}.css 

判断是否加载成功

  • 判断YUI.Env._cssLoaded[name]中是否已经存在
  • 判断cssStampEl元素在当前文档中的display属性是否为none
    • 在加载css的过程中,会将模块名作为className放到cssStampEl上, 判断display属性后在移除className
isCSSLoaded: function(name, skip) {
       //TODO - Make this call a batching call with name being an array
       if (!name || !YUI.Env.cssStampEl || (!skip && this.ignoreRegistered)) {
           return false;
       }
       var el = YUI.Env.cssStampEl,
           ret = false,
           mod = YUI.Env._cssLoaded[name],
           style = el.currentStyle; //IE
 
       if (mod !== undefined) {
           return mod;
       }
       //Add the classname to the element
       el.className = name;
       if (!style) {
           style = Y.config.doc.defaultView.getComputedStyle(el, null);
       }
       if (style && style.display === 'none') {
           ret = true;
       }
 
       el.className = ''; //Reset the classname to ''
       YUI.Env._cssLoaded[name] = ret;
       return ret;
   },

  

阻止CSS自动加载

由于在动态加载css过程中,会将模块的名称作为className加到cssStampEl上,可以直接使用id和模块名的组合方式,设置cssStampEl元素的display即可做到阻止动态加载模块的css

#yui3-css-stamp.skin-sam-w-table-editable { display:none }

应用场景

当应用层不需要组件层提供默认样式的时候,就可以通过这种方式来阻止Loader动态加载默认的css。 

 

posted @ 2015-02-24 21:03  mininice  阅读(295)  评论(0编辑  收藏  举报