手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表Tag:lazyloader

JS/CSS/images lazyLoader for JQuery

在jQuery的插件库里面,有一个imageLazyLoader,是专门用来进行延迟加载图片的。这次看到这个对于JS,CSS,IMAGE三者都能进行延迟加载的代码,当然是用来查看一下的。代码很小,大约只有3K左右,100多行代码,却实现了这么多的效果,看来jQuery的功能是被挖掘的越来越多了。

JavaScript代码
  1. /* 
  2.  * xLazyLoader 1.0 - Plugin for jQuery 
  3.  * Load js, css and  images 
  4.  * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) 
  5.  * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. 
  6.  * Depends: 
  7.  *   jquery.js 
  8.  *  Copyright (c) 2008 Oleg Slobodskoi (jimdo.com) 
  9.  */  
  10. ;(function($){  
  11.     $.xLazyLoader =  function ( method, options ) {  
  12.         if (typeof method == 'object') {  
  13.             options = method;  
  14.             method = 'load';  
  15.         };  
  16.         xLazyLoader[method]( options );  
  17.     };  
  18.       
  19.     var xLazyLoader = new function ()  
  20.     {  
  21.         var head = document.getElementsByTagName("head")[0];  
  22.         this.load = function ( options )  
  23.         {  
  24.             //Defaults  
  25.             var d = {  
  26.                 js: [],  
  27.                 css: [],  
  28.                 image: [],  
  29.                 name: null,  
  30.                 load: function(){}  
  31.             };  
  32.             $.extend(d, options);  
  33.               
  34.             var self = this,  
  35.                 ready = false,  
  36.                 loaded = {  
  37.                     js: [],  
  38.                     css: [],  
  39.                     image: []  
  40.                 }  
  41.             ;  
  42.               
  43.             each('js', d.js);  
  44.             each('css', d.css);  
  45.             each('image', d.image);  
  46.               
  47.             function each (type, urls)  
  48.             {  
  49.                 if ( $.isArray(urls) && urls.length>0 )  
  50.                     $.each( urls, function(i, url){  
  51.                         load(type, url);  
  52.                     });  
  53.                 else if (typeof urls == 'string')  
  54.                     load(type, urls);  
  55.             };  
  56.             function load (type, url)  
  57.             {  
  58.                 self[type](url, function() {   
  59.                     $.isArray(d[type]) ? loaded[type].push(url) : loaded[type] = url;  
  60.                     d.js.length == loaded.js.length   
  61.                     && d.css.length == loaded.css.length   
  62.                     && d.image.length == loaded.image.length  
  63.                     && d.load.apply(loaded, []);  
  64.                     return;  
  65.                 }, d.name ?'lazy-loaded-'+ d.name : 'lazy-loaded-'+new Date().getTime());  
  66.             };  
  67.         };  
  68.           
  69.         this.js = function (src, callback, name)  
  70.         {  
  71.             if ($('script[src*="'+src+'"]').length>0) {  
  72.                 callback();  
  73.                 return;  
  74.             };  
  75.             var script = document.createElement('script');  
  76.             script.setAttribute("type","text/javascript");  
  77.             script.setAttribute("src", src);  
  78.             script.setAttribute('id', name);  
  79.             if ($.browser.msie)  
  80.                 script.onreadystatechange = function () {  
  81.                      /loaded|complete/.test(script.readyState) && callback();  
  82.                 }  
  83.             else  
  84.                 //FF, Safari, Opera  
  85.                 script.onload = callback;  
  86.             head.appendChild(script);  
  87.         };  
  88.           
  89.         this.css = function (href, callback, name)  
  90.         {  
  91.             if ($('link[href*="'+href+'"]').length>0) {  
  92.                 callback();  
  93.                 return;  
  94.             };  
  95.               
  96.             var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+href+'" id="'+name+'"></link>')[0];  
  97.             if ($.browser.msie)  
  98.                 link.onreadystatechange = function ()   {  
  99.                     /loaded|complete/.test(link.readyState) && callback();  
  100.                 }  
  101.             else if ($.browser.opera)  
  102.                 link.onload = callback;  
  103.             else  
  104.                 //FF, Safari, Chrome  
  105.                 (function(){  
  106.                     try {  
  107.                         link.sheet.cssRule;  
  108.                     } catch(e){  
  109.                         setTimeout(arguments.callee, 20);  
  110.                         return;  
  111.                     };  
  112.                     callback();  
  113.                 })();  
  114.             head.appendChild(link);  
  115.         };  
  116.           
  117.         this.image = function (src, callback)  
  118.         {  
  119.             var img = new Image();  
  120.             img.onload = callback;  
  121.             img.src = src;  
  122.         };  
  123.       
  124.         this.disable = function ( name )  
  125.         {     
  126.             $('#lazy-loaded-'+name, head).attr('disabled''disabled');  
  127.         };  
  128.         this.enable = function ( name )  
  129.         {     
  130.             $('#lazy-loaded-'+name, head).removeAttr('disabled');  
  131.         };  
  132.           
  133.         this.destroy = function ( name )  
  134.         {  
  135.             $('#lazy-loaded-'+name, head).remove();   
  136.         };  
  137.     };  
  138. })(jQuery);  
使用方法也很方便 :

Example 1:

Load some files

 $.xLazyLoader({
     js
: 'jquery.ui.all.js',
     css
: 'ui.allplugins.css',
     image
: 'your_image.jpg',
     load
: function(){
         alert
('All files are loaded');
     
}
 
});
 

Example 2:

Load multiple files of each type

 $.xLazyLoader({
     js
: ['ui.core.js','ui.dialog.js'],
     css
: ['ui.core.css', 'ui.dialog.css'],
     image
: ['your_image.jpg', 'your_image1.jpg', 'your_image2.jpg'],
     name
: 'dialog',
     load
: function(){
         alert
('All files are loaded');
     
}
 
});
 

Example 3:

Remove tags from head (javascript is still working, but css is completely destroyed )

 $.xLazyLoader('destroy','dialog');
 

Example 4:

Disable css.

 $.xLazyLoader('disable','dialog');
 

Enable css.

 $.xLazyLoader('enable','dialog');

项目存在于GOOGLECODE上,网址为:http://code.google.com/p/ajaxsoft/
估计还是会有BUG,不过相信作者应该会更新的

Tags: jquery, lazyloader