Question

我制作了一个预加载器，可以加载一些包含表格和自定义滚动条的内容，而装载Div则覆盖该区域。完成后，加载div应该消失。

由于某种原因，预加载在内容加载完成之前就消失了。

如果您试用此demo并点击场地的最顶层按钮，您可能会注意到它并未完全等待在load div消失之前要配置的所有内容。有些人甚至可能会看到旧内容一两秒钟。

以下是我在下面使用的代码。我也包括了评论。

jQuery(document).delegate(".topCanBeActive", "click", function( e ) {
    e.preventDefault();

    // this just handles the css class of buttons
    jQuery(".topCanBeActive").removeClass("topActive");

    // this just handles the css class of buttons
    jQuery(this).addClass("topActive");

    var pageToLoad = '';
    switch( this.id ) {
        case 'all_events_button':
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'events.html';
                configureEvents();
            });
            break;
        case 'all_venues_button': // this is the venues button
            // fade in 'loading' div
            $('#partypreloader').fadeIn('fast', function() {
                pageToLoad = 'venues.html';

                // configure tables etc
                configureVenues();
            });
            break;
        case 'event_finder_button':
            pageToLoad = 'search.html';
            break;
    }
    if( '' !== pageToLoad ){
        // just in case, I added the same function
        // to load the preload div here
        $('#partypreloader').fadeIn('fast', function() {
            // load the chosen content in desired div
            $('#whole-ajax-content-one').load( pageToLoad, function() {
                // fade out the preload div
                configureFadeOut();
            });
        });
    }
});

这是configureEvents函数，请注意我还使用了一些假加载来掩盖问题。

function configureEvents() {
    window.setTimeout(function() {
        $('#whole-ajax-content-one').load('events.html', function() {

            // configure table
            $("#myTable").tablesorter({
                headers: {
                    0: { sorter: false }
                },
                widgets: ['zebra']
            });

            window.setTimeout(function() {
                // Configure scrollbar
                $('.scroll-pane').jScrollPane();

                // Configure table again - I had issues with this
                // so I did it twice
                $("#myTable").tablesorter({
                    headers: {
                        0: { sorter: false }
                    },
                    widgets: ['zebra']
                });

                // Set CSS class for buttons
                jQuery("#all_events_button").addClass("topActive");
                jQuery("#today_button").addClass("timeframeActive");
            }, 150);
        });

        // Preload div fades out
        $("#partypreloader").fadeOut("slow");
    }, 200);
}

我修改了代码，使预加载工作达到了这样的水平，即代码和它一样复杂。如果你发现了一些看似不合适的东西，请告诉我。非常感谢大家：）

Answer 1

这是您当前的代码吗？然后，if（switch之后）的加载速度可能比你这个非常复杂的configureEvents更快？因此configureFadeOut首先触发（顺便说一下：为什么要加载两次相同的数据？）。如果是这种情况，则会加载内容但不会像我们看到的那样进行配置。由于浏览器缓存数据，因此只发生一次。

那么我的建议是什么？重构此代码。首先，菜单中的每个按钮都应该有自己的内容 - 一个独特的div。您将数据加载到div。使用jQuery .data，您将div设置为loaded，因此每次其他单击都不会触发ajax（除非有理由这样做，如非常动态的数据）。然后在按钮之间点击只会更改css display（或点击fadeIn - fadeOut）。

接下来：为什么要使用delegate？首先，这是过时的（使用on），第二个：菜单在其生命周期内是否会发生变化？如果没有，那就没有意义了。

最后：摆脱那些setTimeouts。写这样简单的代码：

show preloader --> on fadeIn callback load data -->
--> on load callback do some stuff -->
--> hide preloader

这就是我现在所能说的。我希望它有所帮助。如果没有，那么我只能祝你好运！：）

Answer 2

这是您当前的代码：

function configureEvents() {

    window.setTimeout(function() {

        $('#whole-ajax-content-one').load('events.html', function() {
            // other code
        });

        $("#partypreloader").fadeOut("slow");

    }, 200);

}

正如您所看到的，fadeOut来电是load()回调，这意味着淡出发生立即 - 它不会等待load事件。

尝试将置于内部load回调（最后）：

function configureEvents() {

    window.setTimeout(function() {

        $('#whole-ajax-content-one').load('events.html', function() {
            // other code

            $("#partypreloader").fadeOut("slow");
        });        

    }, 200);

}

顺便问一下，剩下的时间是什么？

我的预加载脚本无法完全运行

2 个答案: