Question

我找到了一个js文件，您可以将其包含在页面顶部，以便在页面加载时显示“加载”占位符框。问题是，如果我在页面上有其他元素（如图表），加载时间较长，即使图表尚未加载，页面也会停止显示此占位符。有没有办法修改此代码以保持此占位符直到页面的100％，包括所有元素，加载。与显示加载进度的浏览器类似，直到全部加载。

以下是此JS文件的代码：

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: "<div>Loading ...</div>",
                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('<div id="' + b.background.id + '"/>');
        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('<div id="' + b.id + '" class="' + b.className + '"></div>');
        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);

并将其称为：

$(".preloader").click(function(){ $.loader({ className:"ajLoad", content:"" }); });

Answer 1

您正在使用的插件可能只是等待document.ready函数。您必须修改它以侦听您触发的自定义事件，并确保您的代码在document.ready上或在页面上的最后一个元素加载时触发它。

这可行，但会有点复杂，因为你需要代码来确保在页面上加载东西。

Answer 2

有没有办法修改此代码以保留此占位符 100％的页面，包括所有元素，加载。类似于显示加载进度的浏览器，直到全部加载。

您可以对其窗口使用load语句引用，例如......

$(window).load(function() {
   // put your code here...

});
// NB : put this code before your </head>

预加载页面占位符jQuery插件

2 个答案: