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。

YUI 阻止动态css加载的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. CSS 加载新方式

    Chrome 浏览器有意改变<link rel="stylesheet">的加载方式,当其出现在<body>中时,这一变化将更加明显.笔者决定在本文中进行详 ...

  3. 【微信小程序】模仿58同城页面制作以及动态数据加载

    完成动态数据的加载,如下 使用上班的空余时间慢慢的学习,相信总有一天我会很熟悉的掌握这门技术. 本次学习小总结: 微信小程序使用的代码基本与HTML.CSS.JS等前段有关知识一样. 微信小程序js使 ...

  4. css加载字体跨域问题

    刚才碰到一个css加载字体跨域问题,记录一下.站点的动态请求与静态文件请求是不同的域名的.站点的域名为 www.domain.com,而静态文件的域名为 st.domain.com.问题:页面中加载c ...

  5. Canvas制作动态进度加载水球

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Java_动态重新加载Class总结

    在此记载Java动态重新加载Class的点点滴滴,实现之前也在网上看了很多文章,但发现不是很清晰,后来发现总结,看源码实现还是最靠谱. 直接上代码: package com.lkb.autoCode. ...

  7. Java_动态重新加载Class机制

    Java动态重新加载Class 项目中使用到了动态重新加载Class的机制,作用是让一些代码上线之前可以在线上环境测试一下,当然,这是非常不好的测试机制,我刚来的时候也为这种机制感到惊讶—怎么可以在线 ...

  8. css加载优化

    <head> <script> // https://github.com/filamentgroup/loadCSS !function(e){"use stric ...

  9. 炫!一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

随机推荐

  1. PHP Session的优化使用

    前言 首先说一下,原版session实际并不是很烂,如果你的项目不是高并发项目,完全可以使用原版session. PHP默认的session是以文件形式保存在本地磁盘上的,每次访问实际就是一次io操作 ...

  2. idea为tomcat设置虚拟地址

    1.设置tomcat的server.xml <Host name="localhost" appBase="webapps" unpackWARs=&qu ...

  3. window.location.hash 使用说明

    本文给大家详细汇总了关于window.location.hash的知识点,属性以及用法等等,非常的实用,并附上了例子,有需要的小伙伴可以参考下.   location是javascript里边管理地址 ...

  4. Web开发入门学习笔记

    公司web项目终于要启动了,本以为django学习可以在实战中进行,结果最终使用了Drupal框架,好吧,那我们就PHP走起,买了本<细说PHP>,先跟着过一遍Web开发入门. HTTP协 ...

  5. python模块:shelve

    shelve 1)模块功能:以 key - value 的方式存储数据. 2)写数据 >>> import shelve >>> db = shelve.open( ...

  6. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

  7. 机器学习小记——KNN(K近邻) ^_^ (一)

    为了让绝大多数人都可以看懂,所以我就用简单的话语来讲解机器学习每一个算法 第一次写ML的博文,所以可能会有些地方出错,欢迎各位大佬提出意见或错误 祝大家开心进步每一天- 博文代码全部为python 简 ...

  8. [Spark性能调优] 第一章:性能调优的本质、Spark资源使用原理和调优要点分析

    本課主題 大数据性能调优的本质 Spark 性能调优要点分析 Spark 资源使用原理流程 Spark 资源调优最佳实战 Spark 更高性能的算子 引言 我们谈大数据性能调优,到底在谈什么,它的本质 ...

  9. PHP读取excel中地址实现多文件下载

    PHP文件下载有单文件和多文件之分,如果是单文件写个方法可以实现,但是如果想循环下载多个文件我试验是没有成功.先说单文件的下载,方法如下: function downfile($fileurl) { ...

  10. PE解析器的编写(三)——区块表的解析

    PE文件中所有节的属性都被定义在节表中,节表由一系列的IMAGE_SECTION_HEADER结构排列而成,每个结构用来描述一个节,结构的排列顺序和它们描述的节在文件中的排列顺序是一致的. 具有相同属 ...