CSS、JS动态加载,加强版

var dcLoader = {
    load: function(option,callback){
        var _type = "",_url = "";
        var _callback = callback
        option.type? _type = option.type:"";
        option.url? _url = option.url:"";
        typeof option.filtration === "boolean"? filtration = option.filtration:"";
        switch(_type){
            case "js":
            case "javascript": this.js(_url,_callback); break;
            case "css": this.link(_url,_callback); break;
        }
        return this;
    },
    js: function(url,callback){
        var urls = url.replace(/[,]\s*$/ig,"").split(",");
        var scripts = [];
        var completeNum = 0;
        for( var i = 0; i < urls.length; i++ ){
            scripts[i] = document.createElement("script");
            scripts[i].type = "text/javascript";
            scripts[i].src = urls[i];
            document.getElementsByTagName("head")[0].appendChild(scripts[i]);
            if(!this.func(callback)){return this;}
            if(scripts[i].readyState){
                scripts[i].onreadystatechange = function(){
                    if( this.readyState === "loaded" || this.readyState === "complete" ){
                        this.onreadystatechange = null;
                        completeNum++;
                        completeNum >= urls.length ? callback () : '';
                    }
                }
            }else{
                scripts[i].onload = function(){
                    completeNum ++;
                    completeNum >= urls.length ? callback () : '';
                }
            }

        }
        return this;
    },
    link : function(url,callback){
        var urls = url.replace(/[,]\s*$/ig,"").split(",");
        var links = [];
        for( var i = 0; i < urls.length; i++ ){
            links[i] = document.createElement("link");
            links[i].rel = "stylesheet";
            links[i].href = urls[i];
            document.getElementsByTagName("head")[0].appendChild(links[i]);
        }
        this.func(callback) ? callback() : '';
        return this;
    },
    func : function isFunction(fn) {
        return Object.prototype.toString.call(fn)=== '[object Function]';
    }
};

Continue reading...

javascript 动态加载js css 回调

一款实现无阻塞加载javascript的js、css动态加载器(css 是顺带的功能…),作用是给目标js、css通过createElement方式动态append到body中的head里头,并提供加载成功时回调函数的功能。
载自:http://www.jackness.org/?p=716

  1. /*  
  2.  * jcLoader()  一个简单的 js、css动态加载 api  
  3.  * jcLoader().load(url,callback)  加载函数 支持链式操作  
  4.  * -url 需要加载的 js/css 地址,支持同时加载多个 地址之间用 ‘,’隔开  
  5.  * -callback 加载完成 url里面的文件之后触发的事件  
  6.  * ---------------------------------------------------  
  7.  * example:  
  8.  
  9. 完整版:  
  10. jcLoader().load({  
  11.     type:"js",  
  12.     url:"temp/demojs01.js,temp/demojs02.js,temp/demojs03.js,temp/demojs04.js,temp/demojs05.js,"  
  13. },function(){  
  14.     alert("all file loaded");  
  15. }).load({  
  16.     type:"css",  
  17.     url:"temp/democss01.css"  
  18. },function(){  
  19.     alert("all css file loaded");  
  20. })  
  21. 简单版:  
  22. jcLoader().load({type:"js",url:"temp/demojs01.js"},function(){alert("all file loaded")});  
  23. jcLoader().load({type:"css",url:"temp/democss01.css"},function(){alert("all css file loaded")});  
  24.  
  25.  * ---------------------------------------------------  
  26.  * power by jackNEss  
  27.  * date:2011-11-10(光棍节前夕)  
  28.  * ver 1.0  
  29.  */  
  30. var jcLoader = function(){   
  31.   
  32.     var dc = document;   
  33.   
  34.     function createScript(url,callback){   
  35.         var urls = url.replace(/[,]\s*$/ig,"").split(",");   
  36.         var scripts = [];   
  37.         var completeNum = 0;   
  38.         forvar i = 0; i < urls.length; i++ ){   
  39.   
  40.             scripts[i] = dc.createElement("script");   
  41.             scripts[i].type = "text/javascript";   
  42.             scripts[i].src = urls[i];   
  43.             dc.getElementsByTagName("head")[0].appendChild(scripts[i]);   
  44.   
  45.             if(!callback instanceof Function){return;}   
  46.   
  47.             if(scripts[i].readyState){   
  48.                 scripts[i].onreadystatechange = function(){   
  49.   
  50.                     ifthis.readyState == "loaded" || this.readyState == "complete" ){   
  51.                         this.onreadystatechange = null;   
  52.                         completeNum++;   
  53.                         completeNum >= urls.length?callback():"";   
  54.                     }   
  55.                 }   
  56.             }   
  57.             else{   
  58.                 scripts[i].onload = function(){   
  59.                     completeNum++;   
  60.                     completeNum >= urls.length?callback():"";   
  61.                 }   
  62.             }   
  63.   
  64.         }   
  65.   
  66.     }   
  67.   
  68.     function createLink(url,callback){   
  69.         var urls = url.replace(/[,]\s*$/ig,"").split(",");   
  70.         var links = [];   
  71.         forvar i = 0; i < urls.length; i++ ){   
  72.             links[i] = dc.createElement("link");   
  73.             links[i].rel = "stylesheet";   
  74.             links[i].href = urls[i];   
  75.             dc.getElementsByTagName("head")[0].appendChild(links[i]);   
  76.         }   
  77.         callback instanceof Function?callback():"";   
  78.     }   
  79.     return{   
  80.         load:function(option,callback){   
  81.             var _type = "",_url = "";   
  82.             var _callback = callback   
  83.             option.type? _type = option.type:"";   
  84.             option.url? _url = option.url:"";   
  85.             typeof option.filtration == "boolean"? filtration = option.filtration:"";   
  86.   
  87.             switch(_type){   
  88.                 case "js":   
  89.                 case "javascript": createScript(_url,_callback); break;   
  90.                 case "css": createLink(_url,_callback); break;   
  91.             }   
  92.   
  93.             return this;   
  94.         }   
  95.     }   
  96. }  

Continue reading...

领人舒适的CSS颜色代码

http_localhost_color.jpg

Continue reading...

几种隐藏页面区域的方法。

display:none;
这个比较常见了,有时候能看见某些页面写着类似的代码,直接设置为页面不可见,但是搜索引擎会爬到,搜了一下,很多网友说网站被降权有可能是这么做引起的,值得一提的是,做一些基本优化是必备的,但是如果用来隐藏大批量的链接或者文本,不被搜索引擎盯梢才怪呢。
text-indent:-9999px;
这种写法是我习惯用的一种,日常的显示器再大应该没有9999的分辨率吧,将文本推到这个位置,而我们用它腾开的地方来显示背景图片,又照顾了搜索引擎,又实现了页面图片效果。

line-height:height*4;
line-height是height的4倍值,然后overflow:hidden,溢出部分剪切了,文字看不到呀看不到
相对定位 > 绝对定位负值
这个比较少用,感觉是把简单的事情复杂化了,而且增加了较多的代码开销。
父级position:relative;子级position:absolute;left:-9999px;top:-9999px;
相信只要大家合理利用,不要大面积地隐藏文本而达到某种目的的话,应该不会被K。

Continue reading...

CSS Sprite 制作工具

Data URI Sprites

DURIS (Data URI [CSS] Sprites) 是一个管理网页图片的新工具,它可以最大限度的帮助你减少背景图片的数量,减少请求数。



spritr
一个生成CSS Sprites的简单工具

Sprite Creator 1.0

同上

CSS Sprite Generator
制作CSS sprites 的Drupal插件


CSS Sprites Generator
这个工具允许你上传多张图片生成CSS Sprites和CSS代码

Projekt Fondue CSS Sprite Generator
它具有忽略重复图像,调整图像精度,确定横向和纵向偏移,指定背景色和透明度,指定CSS前缀等众多功能。

Continue reading...



about me

  • 陶之11's Blog Name:陶之11 OICQ:14779023 Site:Pao11.com

分类

快捷入口