zoukankan      html  css  js  c++  java
  • js组件的css加载方案

    组件开发时,通常会有配有一个css文件资源。
    但是在实用时,为了减少请求数,这个css有可能被合并在页面的css中。
    那么,写组件时是否需加要载这个css呢?

    应对策略:
    组件的css前加一个.js_xcomponent_css_loaded的规则,来标识该组件对应的css是否已加载。
    而在组件的js里,作一个判断,如果css未预加载(包括独立预加载、或被包含在其它的css文件中一起预加载),则进行加载。
    典型代码如下:
    <html>
    <head>
    <link hrefffff="dddd/panel.css" rel="stylesheet" type="text/css"><!-- 这里没引用 -->
    <style>
    .js_panel_css_loaded
    {width:30px;display:none;}/*用".js_panel_css_loaded"来表示这里已经有了panel对应的css了*/
    .js_panel
    {/*更多css*/}
    </style>
    </head>
    <body>
    </body>
    <SCRIPT LANGUAGE="JavaScript" remark="panel组件里与css相关代码的示意">
    (
    function() {
    /**
    * 获得element对象当前的样式
    * @method getCurrentStyle
    * @param {element|string|wrap} el id,Element实例或wrap
    * @param {string} attribute 样式名
    * @return {string}
    */
    var getCurrentStyle = function(el, attribute) {
    if(el.currentStyle) {
    return el.currentStyle[attribute];
    }
    else {
    var style = el.ownerDocument.defaultView.getComputedStyle(el, null);
    return style ? style.getPropertyValue(attribute) : null;
    }
    };

    var el=document.createElement('div');
    document.body.appendChild(el);
    el.className
    ='js_panel_css_loaded';
    if(getCurrentStyle(el, 'width') == '30px') alert('panel_css已经加载过了,不需再加载');
    else alert('需要加载panel_css');
    document.body.removeChild(el);
    }());
    </SCRIPT>
    </html>
  • 相关阅读:
    UVALive
    UVALive
    UVA
    UVALive
    BZOJ3597 SCOI2014方伯伯运椰子(分数规划+spfa)
    BZOJ3456 城市规划(多项式求逆)
    BZOJ4182 Shopping(点分治+树形dp)
    BZOJ4383 Pustynia(线段树+拓扑排序)
    BZOJ4445 SCOI2015小凸想跑步(半平面交)
    BZOJ5311 贞鱼(动态规划+wqs二分+决策单调性)
  • 原文地址:https://www.cnblogs.com/jkisjk/p/js_xcomponent_css_loaded.html
Copyright © 2011-2022 走看看