Question

我有一个运行非常大的设置脚本的页面，其中一部分依赖于jQuery＆amp;的第三方扩展。 jQueryUI（特别是DataTables＆amp; Foundation）以及一套内部脚本。在使用jQueryUI的选项卡之间，DataTables重组＆amp;表格的分页，以及基金会在$(document).ready()之后的样式应用有一个丑陋的时期，在1到4秒之间，取决于设备，页面明显重新洗牌。

我希望通过在所有内容之前保持加载屏幕来隐藏它，直到它完成，但我不确定如何检测完成。一般来说，我知道我需要类似下面的内容（对不起，我没有逐字典，但它很庞大而且没有帮助，这种一般形式真的应该足够了）：

// far away in another document that is in fact a collection of ~3k lines of code
var InHouseLibraryInstance = {
    events: {
         PageInitialized: jQuery.Event('PageIntitialized', {"bubbles": true, "cancelable": false, "eventPhase": 0, "type": 'PageIntitialized'});
    },
    init: function() {
         $(".using-data-tables").each(function() {
            $(this).dataTable();
         });
    }
}

// my actual loading script
var InHouseLibrary = new InHouseLibraryInstance();
$(document).on("PageInitialized", function() { $("#loadingScreen").hide();});

$(document).ready(function() {
    /* need to wrap these next two lines such that I can fire a custom 
       event—'PageInitialized' here, but any would do—when they've 
       completed */
    $(document).foundation();
    InHouseLibrary.init();

    /* Having detected the completion of the post-'ready'  rendering
       sequence, I want to fire an event (or, I suppose, execute a function,
       either is fine) */
    $(document).trigger("PageInitialized")
});

我的感觉是，这是jQuery的延迟对象的用途，但是我经过几个小时和几个教程，StackOverflow等问题，不知道如何使用它们来实现所描述的结束。因此，基于jQuery的解决方案将是理想的，但不是必需的。

更新：我的（仍然失败）尝试从@DavidTansey实施解决方案：

$(document).ready( function() {
    var rendering = function () {
            var deferred = $.Deferred();
            deferred.resolve({
                InHouseLibrary: function() {
                    InHouseLibrary.init();
                 }, 
                Foundation: function() {
                  $(document).foundation();
                }
            });
            return deferred.promise();
    }

    rendering().done(function(status) {
        /* this is still reached well in advance of completing
           post-document-ready rendering */
        console.log(status);
    });
});

如果我理解正确，那么这不起作用的原因是因为deferred.resolve()作为封装函数 fire 而不是完成时完成。我需要的是一种了解他们所进行的渲染何时完成的方法，即。当DataTables完成更改初始化表的所有行时，或者当jQueryUI完成将页面重新组织为选项卡等时。

任意jQuery函数集完成后获取通知

0 个答案: