Changeset 666 for trunk


Ignore:
Timestamp:
11/15/2011 09:47:04 AM (6 months ago)
Author:
ofer
Message:

Newer version of lazyLoader

File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/WordPress/plugin/transposh/js/lazy.js

    r349 r666  
    11/* 
    2  * xLazyLoader 1.3 - Plugin for jQuery 
     2 * xLazyLoader 1.5 - Plugin for jQuery 
    33 *  
    44 * Load js, css and images asynchron and get different callbacks 
    … …  
    1010 *   jquery.js 
    1111 * 
    12  *  Copyright (c) 2008 Oleg Slobodskoi (ajaxsoft.de) 
     12 *  Copyright (c) 2010 Oleg Slobodskoi (jsui.de) 
    1313 */ 
    1414 
    1515;(function($){ 
    1616 
    17     $.xLazyLoader =  function ( method, options ) { 
    18         if ( typeof method == 'object' ) { 
    19             options = method; 
    20             method = 'init'; 
    21         }; 
    22         new xLazyLoader()[method](options); 
    23     }; 
    24      
    25     $.xLazyLoader.defaults = { 
    26         js: [], css: [], img: [], 
    27         name: null, 
    28         timeout: 20000, 
    29         //success callback for all files 
    30         success: function(){},  
    31         //error callback - by load errors / timeout 
    32         error: function(){}, 
    33         //complete callbck - by success or errors 
    34         complete: function(){}, 
    35         //success callback for each file 
    36         each: function(){}  
    37     }; 
    38  
    39     var head = document.getElementsByTagName("head")[0]; 
    40      
    41     function xLazyLoader () 
    42     { 
    43  
    44         var self = this, 
    45             s, 
    46             loaded = [], 
    47             errors = [], 
    48             tTimeout, 
    49             cssTimeout, 
    50             toLoad, 
    51             files = [] 
    52         ; 
    53          
    54         this.init = function ( options ) 
    55         { 
    56                 if ( !options ) return; 
    57                  
    58                 s = $.extend({}, $.xLazyLoader.defaults, options); 
    59                 toLoad = {js: s.js, css: s.css, img: s.img}; 
    60                  
    61             $.each(toLoad, function( type, f ){ 
    62                 if ( typeof f == 'string' )         
    63                     f = f.split(','); 
    64                 files = files.concat(f);     
    65             }); 
    66  
    67             if ( !files.length ) { 
    68                 dispatchCallbacks('error'); 
    69                 return;     
     17$.xLazyLoader =  function ( method, options ) { 
     18    if ( typeof method == 'object' ) { 
     19        options = method; 
     20        method = 'init'; 
     21    }; 
     22    new xLazyLoader()[method](options); 
     23}; 
     24 
     25$.xLazyLoader.defaults = { 
     26    js: [], css: [], img: [], 
     27    jsKey: null, cssKey: null, imgKey: null, 
     28    name: null, 
     29    timeout: 20000, 
     30    //success callback for all files 
     31    success: $.noop,  
     32    //error callback - by load errors / timeout 
     33    error: $.noop, 
     34    //complete callbck - by success or errors 
     35    complete: $.noop, 
     36    //success callback for each file 
     37    each: $.noop  
     38}; 
     39 
     40var head = document.getElementsByTagName("head")[0]; 
     41 
     42function xLazyLoader () 
     43{ 
     44 
     45    var self = this, 
     46        s, 
     47        loaded = [], 
     48        errors = [], 
     49        tTimeout, 
     50        cssTimeout, 
     51        toLoad, 
     52        files = [] 
     53    ; 
     54     
     55    this.init = function ( options ) 
     56    { 
     57        if ( !options ) return; 
     58         
     59        s = $.extend({}, $.xLazyLoader.defaults, options); 
     60        toLoad = {js: s.js, css: s.css, img: s.img}; 
     61         
     62        $.each(toLoad, function( type, f ){ 
     63            if ( typeof f == 'string' )         
     64                f = f.split(','); 
     65            files = files.concat(f);     
     66        }); 
     67 
     68        if ( !files.length ) { 
     69            dispatchCallbacks('error'); 
     70            return;     
     71        }; 
     72 
     73        if (s.timeout) { 
     74            tTimeout = setTimeout(function(){ 
     75                var handled = loaded.concat(errors); 
     76                /* search for unhandled files */ 
     77                $.each(files, function(i, file){ 
     78                    $.inArray(file, handled) == -1 && errors.push(file);         
     79                }); 
     80                dispatchCallbacks('error');             
     81            }, s.timeout); 
     82        }; 
     83 
     84 
     85        $.each(toLoad, function(type, urls){ 
     86            if ( $.isArray(urls) ) 
     87                $.each( urls, function(i, url){ 
     88                    load(type, url); 
     89                }); 
     90            else if (typeof urls == 'string') 
     91                load(type, urls); 
     92        }); 
     93         
     94 
     95 
     96    }; 
     97 
     98    this.js = function ( src, callback, name, key ) 
     99    { 
     100        var $script = $('script[src*="'+src+'"]'); 
     101        if ( $script.length ) { 
     102            $script.attr('pending') ? $script.bind('scriptload',callback) : callback(); 
     103            return; 
     104        }; 
     105         
     106        var s = document.createElement('script'); 
     107        s.setAttribute("type","text/javascript"); 
     108        s.setAttribute('charset', 'UTF-8'); 
     109        s.setAttribute("src", src + key); 
     110        s.setAttribute('id', name); 
     111        s.setAttribute('pending', 1); 
     112        // Mozilla only 
     113        s.onerror = addError; 
     114         
     115         
     116        $(s).bind('scriptload',function(){ 
     117            $(this).removeAttr('pending'); 
     118            callback(); 
     119             //unbind load event 
     120             //timeout because of pending callbacks 
     121            setTimeout(function(){ 
     122                $(s).unbind('scriptload'); 
     123            },10); 
     124        }); 
     125         
     126        // jQuery doesn't handles onload event special for script tag, 
     127        var done = false; 
     128        s.onload = s.onreadystatechange = function() { 
     129            if ( !done && ( !this.readyState || /loaded|complete/.test(this.readyState) ) ) { 
     130                done = true; 
     131                // Handle memory leak in IE 
     132                s.onload = s.onreadystatechange = null; 
     133                $(s).trigger('scriptload');  
    70134            }; 
    71  
    72             if (s.timeout) { 
    73                 tTimeout = setTimeout(function(){ 
    74                     var handled = loaded.concat(errors); 
    75                     /* search for unhandled files */ 
    76                     $.each(files, function(i, file){ 
    77                         $.inArray(file, handled) == -1 && errors.push(file);         
    78                     }); 
    79                     dispatchCallbacks('error');             
    80                 }, s.timeout); 
     135        }; 
     136        head.appendChild(s); 
     137     
     138    }; 
     139 
     140    this.css = function ( href, callback, name, key ) 
     141    { 
     142 
     143        if ( $('link[href*="'+href+'"]').length ) { 
     144            callback(); 
     145            return; 
     146        }; 
     147         
     148 
     149        var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+ href + key + '" id="'+name+'"></link>')[0]; 
     150        if ( $.browser.msie ) { 
     151            link.onreadystatechange = function () { 
     152                /loaded|complete/.test(link.readyState) && callback(); 
    81153            }; 
    82  
    83  
    84             $.each(toLoad, function(type, urls){ 
    85                 if ( $.isArray(urls) ) 
    86                     $.each( urls, function(i, url){ 
    87                         load(type, url); 
    88                     }); 
    89                 else if (typeof urls == 'string') 
    90                     load(type, urls); 
    91             }); 
     154        } else if ( $.browser.opera ) { 
     155            link.onload = callback; 
     156        } else { 
     157            /*  
     158             * Mozilla, Safari, Chrome  
     159             * unfortunately it is inpossible to check if the stylesheet is really loaded or it is "HTTP/1.0 400 Bad Request" 
     160             * the only way to do this is to check if some special properties  were set, so there is no error callback for stylesheets - 
     161             * it fires alway success 
     162             *  
     163             * There is also no access to sheet properties by crossdomain stylesheets,  
     164             * so we fire callback immediately 
     165             */ 
    92166             
    93  
    94  
    95         }; 
    96  
    97         this.js = function ( src, callback, name ) 
    98         { 
    99             var $script = $('script[src*="'+src+'"]'); 
    100             if ( $script.length ) { 
    101                 $script.attr('pending') ? $script.bind('scriptload',callback) : callback(); 
    102                 return; 
    103             }; 
    104              
    105             var s = document.createElement('script'); 
    106             s.setAttribute("type","text/javascript"); 
    107             s.setAttribute("src", src); 
    108             s.setAttribute('id', name); 
    109             s.setAttribute('pending', 1); 
    110             // Mozilla only 
    111             s.onerror = addError; 
    112              
    113              
    114             $(s).bind('scriptload',function(){ 
    115                 $(this).removeAttr('pending'); 
    116                 callback(); 
    117                  //unbind load event 
    118                  //timeout because of pending callbacks 
    119                 setTimeout(function(){ 
    120                     $(s).unbind('scriptload'); 
    121                 },10); 
    122             }); 
    123              
    124             // jQuery doesn't handling onload event special for script tag, 
    125                         var done = false; 
    126                         s.onload = s.onreadystatechange = function() { 
    127                                 if ( !done && ( !this.readyState || /loaded|complete/.test(this.readyState) ) ) { 
    128                                         done = true; 
    129                                         // Handle memory leak in IE 
    130                                         s.onload = s.onreadystatechange = null; 
    131                     $(s).trigger('scriptload');  
    132                                 }; 
    133                         }; 
    134             head.appendChild(s); 
    135          
    136         }; 
    137  
    138         this.css = function ( href, callback, name ) 
    139         { 
    140  
    141             if ( $('link[href*="'+href+'"]').length ) { 
    142                 callback(); 
    143                 return; 
    144             }; 
    145              
    146  
    147             var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+href+'" id="'+name+'"></link>')[0]; 
    148             if ( $.browser.msie ) { 
    149                 link.onreadystatechange = function () { 
    150                     /loaded|complete/.test(link.readyState) && callback(); 
    151                 }; 
    152             } else if ( $.browser.opera ) { 
    153                 link.onload = callback; 
    154             } else { 
    155                 /*  
    156                  * Mozilla, Safari, Chrome  
    157                  * unfortunately it is inpossible to check if the stylesheet is really loaded or it is "HTTP/1.0 400 Bad Request" 
    158                  * the only way to do this is to check if some special properties  were set, so there is no error callback for stylesheets - 
    159                  * it fires alway success 
    160                  *  
    161                  * There is also no access to sheet properties by crossdomain stylesheets,  
    162                  * so we fire callback immediately 
    163                  */ 
     167            var hostname = location.hostname.replace('www.',''), 
     168                hrefHostname = /http:/.test(href) ? /^(\w+:)?\/\/([^\/?#]+)/.exec( href )[2] : hostname; 
     169            hostname != hrefHostname && $.browser.mozilla ?   
     170                callback() 
     171                :   
     172                //stylesheet is from the same domain or it is not firefox 
     173                (function(){ 
     174                    try { 
     175                        link.sheet.cssRules; 
     176                    } catch (e) { 
     177                        cssTimeout = setTimeout(arguments.callee, 20); 
     178                        return; 
     179                    }; 
     180                    callback(); 
     181                })(); 
     182        }; 
     183 
    164184                 
    165                 var hostname = location.hostname.replace('www.',''), 
    166                     hrefHostname = /http:/.test(href) ? /^(\w+:)?\/\/([^\/?#]+)/.exec( href )[2] : hostname; 
    167                 hostname != hrefHostname && $.browser.mozilla ?   
    168                     callback() 
    169                     :   
    170                     //stylesheet is from the same domain or it is not firefox 
    171                     (function(){ 
    172                         try { 
    173                             link.sheet.cssRules; 
    174                         } catch (e) { 
    175                             cssTimeout = setTimeout(arguments.callee, 20); 
    176                             return; 
    177                         }; 
    178                         callback(); 
    179                     })(); 
    180             }; 
    181      
    182                      
    183             head.appendChild(link); 
    184         }; 
    185          
    186         this.img = function ( src, callback ) 
    187         { 
    188             var img = new Image(); 
    189             img.onload = callback; 
    190             img.onerror = addError; 
    191             img.src = src; 
    192         }; 
    193          
    194         /* It works only for css */ 
    195         this.disable = function ( name ) 
    196         {     
    197             $('#lazy-loaded-'+name, head).attr('disabled', 'disabled'); 
    198         }; 
    199  
    200         /* It works only for css */ 
    201         this.enable = function ( name ) 
    202         {     
    203             $('#lazy-loaded-'+name, head).removeAttr('disabled'); 
    204         }; 
    205          
    206         /* 
    207          * By removing js tag, script ist still living in browser memory, 
    208          * css will be really destroyed 
    209          */ 
    210         this.destroy = function ( name ) 
    211         { 
    212             $('#lazy-loaded-'+name, head).remove();     
    213         }; 
    214          
    215         function load ( type, url ) { 
    216             self[type](url, function(status) {  
    217                 status == 'error' ? errors.push(url) : loaded.push(url) && s.each(url); 
    218                 checkProgress(); 
    219             }, 'lazy-loaded-'+ (s.name ? s.name : new Date().getTime()) ); 
    220         }; 
    221          
    222         function dispatchCallbacks ( status ) { 
    223             s.complete(status, loaded, errors); 
    224             s[status]( status=='error' ? errors : loaded); 
    225             clearTimeout(tTimeout); 
    226             clearTimeout(cssTimeout); 
    227         }; 
    228          
    229         function checkProgress () { 
    230             if (loaded.length == files.length) dispatchCallbacks('success') 
    231             else if (loaded.length+errors.length == files.length) dispatchCallbacks('error'); 
    232         }; 
    233          
    234         function addError () { 
    235             errors.push(this.src);     
     185        head.appendChild(link); 
     186    }; 
     187     
     188    this.img = function ( src, callback, name, key ) 
     189    { 
     190        var img = new Image(); 
     191        img.onload = callback; 
     192        img.onerror = addError; 
     193        img.src = src + key; 
     194    }; 
     195     
     196    /* It works only for css */ 
     197    this.disable = function ( name ) 
     198    {     
     199        $('#lazy-loaded-'+name, head).attr('disabled', 'disabled'); 
     200    }; 
     201 
     202    /* It works only for css */ 
     203    this.enable = function ( name ) 
     204    {     
     205        $('#lazy-loaded-'+name, head).removeAttr('disabled'); 
     206    }; 
     207     
     208    /* 
     209     * By removing js tag, script ist still living in browser memory, 
     210     * css will be really destroyed 
     211     */ 
     212    this.destroy = function ( name ) 
     213    { 
     214        $('#lazy-loaded-'+name, head).remove();     
     215    }; 
     216     
     217    function load ( type, url ) { 
     218        self[type](url, function(status) {  
     219            status == 'error' ? errors.push(url) : loaded.push(url) && s.each(url); 
    236220            checkProgress(); 
    237         }; 
    238  
    239     }; 
    240  
    241  
    242  
    243 })(jQuery);         
     221        }, 'lazy-loaded-'+ (s.name ? s.name : new Date().getTime()), s[type+'Key'] ? '?key='+s[type+'Key'] : '' ); 
     222    }; 
     223     
     224    function dispatchCallbacks ( status ) { 
     225        s.complete(status, loaded, errors); 
     226        s[status]( status=='error' ? errors : loaded); 
     227        clearTimeout(tTimeout); 
     228        clearTimeout(cssTimeout); 
     229    }; 
     230     
     231    function checkProgress () { 
     232        if (loaded.length == files.length) dispatchCallbacks('success') 
     233        else if (loaded.length+errors.length == files.length) dispatchCallbacks('error'); 
     234    }; 
     235     
     236    function addError () { 
     237        errors.push(this.src);     
     238        checkProgress(); 
     239    }; 
     240 
     241}; 
     242 
     243})(jQuery); 
Note: See TracChangeset for help on using the changeset viewer.