The name (and code [and doc]) says it all.
Have fun!
(function($) { /** * A page loading progress object. Initialized by passing a "loader" element in * which the loading progress will be displayed by a * <div><span>[dynamicPercentage]</span>%</div> * * e.g. Insert <div id="loader"></div> inside your page.tpl.php (or html...) * then follow usage :) * * Usage: * $('#loader').loader({options}); * * Options: * 'wrapper': $(document.body), * The element in which we check for the images to load * 'container': $('#container'), * Container for your content which will get hidden then faded-in when * the page has finished loading * 'loadingClass': 'loading', * CSS class added to the loader and container for extra theming * 'callback': function(){} * Callback function that gets called after $('#container') finished * fading in * * * Version: 1.2 (30/04/2009) * Requires: jQuery v1.2.6+ * Copyright (c) 2009 Vincent Gariepy * Dual licensed under the MIT (en.wikipedia.org/wiki/MIT_License) * and GPL (en.wikipedia.org/wiki/GNU_General_Public_License) licenses * * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without * restriction, including without limitation the rights to use, * copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the * Software is furnished to do so, subject to the following * conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR * OTHER DEALINGS IN THE SOFTWARE. */ $.fn.loader = function(options) { return $.fn.loader.init(this, options); }; $.fn.loader.init = function(loader, options) { if ($(loader).length <= 0) { return false; } var settings = { 'wrapper': $(document.body), 'container': $('#container'), 'loadingClass': 'loading', 'callback': function(){} }; if (options) $.extend(settings, options); var $percent = $('<span>0</span>'); var $loadel = $('<div></div>').text('%').prepend($percent); var $loader = $(loader).append($loadel); var $wrapper = $(settings.wrapper); var $container = $(settings.container); imgLoaded = 0; imgTotal = $('img:visible', $wrapper).length; if (imgTotal <= 0) { initLoaded(); return false; } // We can go ahead now, hide the content in $container and attach // behaviors $container.hide(); $(loader).addClass(settings.loadingClass); $wrapper.addClass(settings.loadingClass).css('cursor','wait'); $('img:visible', $wrapper).each(function(img){ $(this).load(function(e){ imgLoaded++; var percentLoaded = parseInt((parseInt(imgLoaded) * 100) / parseInt(imgTotal)); $percent.text(percentLoaded); if (imgLoaded == imgTotal) { initLoaded(); } }); }); initLoaded = function() { $container.fadeIn('normal',function() { $loader.removeClass(settings.loadingClass).stop().fadeOut('normal'); $wrapper.removeClass(settings.loadingClass).css('cursor','auto'); if (typeof(settings.callback) == 'function') $(settings.callback({'loaded': true})); if ($.browser.msie) { fixIEfilter(this); } }); }; // Force initLoaded() when images don't fire .load() $(window).load( function() { $percent.text('100'); initLoaded(); }); return loader; }; // Replace with your own fading/IE filters solution if you like, otherwise // its needed fixIEfilter = function(els) { $(els).each(function(i){ if ($(this).length > 0) { if (this.style.filter && this.style.removeAttribute) { this.style.removeAttribute('filter'); } } }); }; })(jQuery);
| Attachment | Size |
|---|---|
| jquery.loader.js.txt | 4.95 KB |
You can see it in action at www.caktux.ca/staging/poissonblanc/ which will soon take over www.parcdupoissonblanc.com :), so DON'T TRY TO RESERVE A CAMPSITE YET!!! You'll probably end up paying for nothing :p
Comments
This looks great!
This looks great, caktux - a useful jquery addition to those who want to see the progress of a page loading. Are images referenced in css covered by this too?
burningdog
no images :)
Thanks burningdog!
There are absolutely no images, there's only a div with a span inside that gets injected in the element. The span gets updated with the current percentage of images loaded.
I think it would be pretty easy to theme this as you want, adding images or css for it :)