在jQuery的插件库里面，有一个imageLazyLoader，是专门用来进行延迟加载图片的。这次看到这个对于JS,CSS,IMAGE三者都能进行延迟加载的代码，当然是用来查看一下的。代码很小，大约只有3K左右，100多行代码，却实现了这么多的效果，看来jQuery的功能是被挖掘的越来越多了。
JavaScript代码
- /*
- * xLazyLoader 1.0 - Plugin for jQuery
- * Load js, css and images
- * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
- * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
- * Depends:
- * jquery.js
- * Copyright (c) 2008 Oleg Slobodskoi (jimdo.com)
- */
- ;(function($){
- $.xLazyLoader = function ( method, options ) {
- if (typeof method == 'object') {
- options = method;
- method = 'load';
- };
- xLazyLoader[method]( options );
- };
- var xLazyLoader = new function ()
- {
- var head = document.getElementsByTagName("head")[0];
- this.load = function ( options )
- {
- //Defaults
- var d = {
- js: [],
- css: [],
- image: [],
- name: null,
- load: function(){}
- };
- $.extend(d, options);
- var self = this,
- ready = false,
- loaded = {
- js: [],
- css: [],
- image: []
- }
- ;
- each('js', d.js);
- each('css', d.css);
- each('image', d.image);
- function each (type, urls)
- {
- if ( $.isArray(urls) && urls.length>0 )
- $.each( urls, function(i, url){
- load(type, url);
- });
- else if (typeof urls == 'string')
- load(type, urls);
- };
- function load (type, url)
- {
- self[type](url, function() {
- $.isArray(d[type]) ? loaded[type].push(url) : loaded[type] = url;
- d.js.length == loaded.js.length
- && d.css.length == loaded.css.length
- && d.image.length == loaded.image.length
- && d.load.apply(loaded, []);
- return;
- }, d.name ?'lazy-loaded-'+ d.name : 'lazy-loaded-'+new Date().getTime());
- };
- };
- this.js = function (src, callback, name)
- {
- if ($('script[src*="'+src+'"]').length>0) {
- callback();
- return;
- };
- var script = document.createElement('script');
- script.setAttribute("type","text/javascript");
- script.setAttribute("src", src);
- script.setAttribute('id', name);
- if ($.browser.msie)
- script.onreadystatechange = function () {
- /loaded|complete/.test(script.readyState) && callback();
- }
- else
- //FF, Safari, Opera
- script.onload = callback;
- head.appendChild(script);
- };
- this.css = function (href, callback, name)
- {
- if ($('link[href*="'+href+'"]').length>0) {
- callback();
- return;
- };
- var link = $('<link rel="stylesheet" type="text/css" media="all" href="'+href+'" id="'+name+'"></link>')[0];
- if ($.browser.msie)
- link.onreadystatechange = function () {
- /loaded|complete/.test(link.readyState) && callback();
- }
- else if ($.browser.opera)
- link.onload = callback;
- else
- //FF, Safari, Chrome
- (function(){
- try {
- link.sheet.cssRule;
- } catch(e){
- setTimeout(arguments.callee, 20);
- return;
- };
- callback();
- })();
- head.appendChild(link);
- };
- this.image = function (src, callback)
- {
- var img = new Image();
- img.onload = callback;
- img.src = src;
- };
- this.disable = function ( name )
- {
- $('#lazy-loaded-'+name, head).attr('disabled', 'disabled');
- };
- this.enable = function ( name )
- {
- $('#lazy-loaded-'+name, head).removeAttr('disabled');
- };
- this.destroy = function ( name )
- {
- $('#lazy-loaded-'+name, head).remove();
- };
- };
- })(jQuery);
Example 1:
$.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:
$.xLazyLoader('disable','dialog');
$.xLazyLoader('enable','dialog');
项目存在于GOOGLECODE上，网址为：http://code.google.com/p/ajaxsoft/
估计还是会有BUG，不过相信作者应该会更新的