AJAXの読み込みを待つプログレスバーを表示する

jQueryプラグインの、http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/:QueryLoader2プラグインを使うと、全画面表示のプログレスバーを表示することができる。(デモサイト)

しかしこのプラグインが検出するのは、HTMLドキュメント中の画像の読み込みの完了だけである。そのため、AJAXでHTML要素を順次読み込んでいくようなモノグサな仕様のサイトでは、このプラグインによってプログレスバーの画面を表示させることができない。そこで、このプラグインを改造して、AJAXリクエストがいくつ完了したかに応じて、プログレスバーの表示を行うようにした。

そのコードが以下のようなものである。

(function($) {
  var qlAjaxDone = 0;

  var qLimageContainer = "";
  var qLoverlay = "";
  var qLbar = "";
  var qLpercentage = "";

  var qLoptions = {
    ajaxEventCount : 0,
    onComplete : function() {
    },
    backgroundColor : "#000",
    barColor : "#fff",
    barHeight : 1,
    percentage : false,
    completeAnimation : "fade",
    onLoadComplete : function() {
      if (qLoptions.completeAnimation == "grow") {
        $(qLbar).stop().css("width", "100%").animate({
          top : "0%",
          height : "100%"
        }, 500, function() {
          $(qLoverlay).fadeOut(500, function() {
            $(this).remove();
            qLoptions.onComplete();
          })
        });
      } else {
        $(qLoverlay).fadeOut(1000, function() {
          $(qLoverlay).remove();
          qLoptions.onComplete();
        });
      }
    }
  }

  var completeAjax = function() {
    if (qlAjaxDone < qLoptions.ajaxEventCount) {
      qlAjaxDone++;
    }

    var percentage = (qlAjaxDone / qLoptions.ajaxEventCount) * 100;
    $(qLbar).stop().animate({
      width : percentage + "%"
    }, 700);

    if (qLoptions.percentage == true) {
      $(qLpercentage).text(Math.ceil(percentage) + "%");
    }

    if (qlAjaxDone == qLoptions.ajaxEventCount) {
      destroyQueryLoader();
    }
  }

  var destroyQueryLoader = function() {
    $(qLimageContainer).remove();
    qLoptions.onLoadComplete();
  }

  var createOverlayLoader = function() {
    qLoverlay = $("<div id='qLoverlay'><div id='loadingLogo'></div></div>").css({
      width : "100%",
      height : "100%",
      backgroundColor : qLoptions.backgroundColor,
      backgroundPosition : "fixed",
      position : "fixed",
      zIndex : 666999,
      top : 0,
      left : 0
    }).appendTo("body");
    qLbar = $("<div id='qLbar'></div>").css({
      height : qLoptions.barHeight + "px",
      marginTop : "-" + (qLoptions.barHeight / 2) + "px",
      backgroundColor : qLoptions.barColor,
      width : "0%",
      position : "absolute",
      top : "50%"
    }).appendTo(qLoverlay);
    if (qLoptions.percentage == true) {
      qLpercentage = $("<div id='qLpercentage'></div>").text("0%").css({
        height : "40px",
        width : "100px",
        position : "absolute",
        fontSize : "3em",
        top : "50%",
        left : "50%",
        marginTop : "-" + (59 + qLoptions.barHeight) + "px",
        textAlign : "center",
        marginLeft : "-50px",
        color : qLoptions.barColor
      }).appendTo(qLoverlay);
    }
  }


  $.fn.queryLoader2 = function(options) {
    if (options) {
      $.extend(qLoptions, options);
    }
    this.ajaxComplete(function() {
      completeAjax();
    });
    createOverlayLoader();
    return this;
  };

})(jQuery);