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