Preload page placeholder jQuery plugin
<p>I found a js file that you can include on top of a page to display "loading" placeholder box while the page is loading. The problem is that if I have other elements on a page, like chart, that take longer to load, the page will stop showing this placeholder even if the chart is not loaded yet. Is there a way to modify this code to keep this placeholder until 100% of the page, including all elements, loads. Similar to the browser that shows load progress untill all is loaded.</p>

<p>Here's the code for this JS file:</p>

<pre><code>var jQueryLoaderOptions = null;
(function(a) {
    a.loader = function(d) {
        switch (d) {
        case "close":
            if (jQueryLoaderOptions) {
                if (a("#" + jQueryLoaderOptions.id)) {
                    a("#" + jQueryLoaderOptions.id + ", #" + jQueryLoaderOptions.background.id).remove()
                }
            }
            return;
            break;
        case "setContent":
            if (jQueryLoaderOptions) {
                if (a("#" + jQueryLoaderOptions.id)) {
                    if (a.loader.arguments.length == 2) {
                        a("#" + jQueryLoaderOptions.id).html(a.loader.arguments[1])
                    } else {
                        if (console) {
                            console.error("setContent method must have 2 arguments $.loader('setContent', 'new content');")
                        } else {
                            alert("setContent method must have 2 arguments $.loader('setContent', 'new content');")
                        }
                    }
                }
            }
            return;
            break;
        default:
            var b = a.extend({
                content: "&lt;div&gt;Loading ...&lt;/div&gt;",
                className: "loader",
                id: "jquery-loader",
                height: 70,
                width: 70,
                zIndex: 30000,
                background: {
                    opacity: 0.4,
                    id: "jquery-loader-background"
                }
            }, d)
        }
        jQueryLoaderOptions = b;
        var c = a(document).height();
        var e = a(window).width();
        var g = a('&lt;div id="' + b.background.id + '"/&gt;');
        g.css({
            zIndex: b.zIndex,
            position: "absolute",
            top: "0px",
            left: "0px",
            width: e,
            height: c,
            opacity: b.background.opacity
        });
        g.appendTo("body");
        if (jQuery.bgiframe) {
            g.bgiframe()
        }
        var f = a('&lt;div id="' + b.id + '" class="' + b.className + '"&gt;&lt;/div&gt;');
        f.css({
            zIndex: b.zIndex + 1,
            width: b.width,
            height: b.height
        });
        f.appendTo("body");
        f.center();
        a(b.content).appendTo(f)
    };
    a.fn.center = function() {
        this.css("position", "absolute");
        this.css("top", (a(window).height() - this.outerHeight()) / 2 + a(window).scrollTop() + "px");
        this.css("left", (a(window).width() - this.outerWidth()) / 2 + a(window).scrollLeft() + "px");
        return this
    }
})(jQuery);
</code></pre>

<p>and call it like this: </p>

<pre><code>$(".preloader").click(function(){ $.loader({ className:"ajLoad", content:"" }); });
</code></pre>
