caktux

caktux putting things together

  • blog
  • projects
  • about
Home » Blogs » caktux's blog

Page loading progress with jQuery

by caktux | Tue, 04/28/2009 - 04:03

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);
AttachmentSize
jquery.loader.js.txt4.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

 
  • caktux's blog
  • Add new comment
  • jquery
 
 

Comments

by Anonymous | Thu, 04/30/2009 - 03:51

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

  • reply
by caktux | Thu, 04/30/2009 - 05:44

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 :)

  • reply
 
  • Seeding torrents from your Trash with Transmission
  • Image placement module for Drupal 6
  • Loader module for Drupal - Page loading progress evolved
  • SUY! jQuery UI based "IE6 is outdated" notification plugin
  • Page loading progress with jQuery
  • D7UX mindmap
  • Display problems with NVidia card on OS X and bad website CSS
  • Rollovers take #2009
  • Fully circular jCarousel for fancy content switching
  • Sliding thumbnail links
more

lately...

  • January 2009 (4)
  • February 2009 (2)
  • April 2009 (3)
  • May 2009 (3)
  • June 2009 (3)

hey!

Using something I did and made a few bucks out of it?
 
© Vincent Gariépy
Powered by Pressflow, an open source content management system