Jquery 我的预加载脚本没有'；我不能完全工作_Jquery

Jquery 我的预加载脚本没有'；我不能完全工作

jquery

Jquery 我的预加载脚本没有'；我不能完全工作,jquery,Jquery,我制作了一个预加载程序，在加载Div覆盖该区域时，加载一些带有表格和自定义滚动条的内容。完成后，load div应该消失由于某些原因，预加载在内容加载完成之前消失如果您尝试此操作并单击顶部的按钮，该按钮显示场馆，您可能会注意到，在load div消失之前，它不会完全等待所有配置完成。有些人甚至会在一两秒钟内看到旧内容下面是我使用的代码。我也加入了评论 jQuery(document).delegate(".topCanBeActive", "click", function( e ) {

我制作了一个预加载程序，在加载Div覆盖该区域时，加载一些带有表格和自定义滚动条的内容。完成后，load div应该消失

由于某些原因，预加载在内容加载完成之前消失

如果您尝试此操作并单击顶部的按钮，该按钮显示场馆，您可能会注意到，在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);
}

我修改了代码，使预加载工作到这样的水平，代码是如此复杂。如果你发现什么不对劲，请告诉我。非常感谢大家：）

这是您当前的代码吗？那么，如果<代码>中的加载（就在<代码>开关之后<代码>）比您的这个非常复杂的<代码>配置事件更快，那么

中的加载可能会更快？因此，configureFadeOut
首先触发（顺便问一下：为什么要加载相同的数据两次？）。如果是这种情况，那么内容将被加载，但不会像我们看到的那样进行配置。由于浏览器缓存数据，所以这种情况只发生一次
那么我的建议是什么呢？重构此代码。首先，菜单中的每个按钮都应该有自己的内容——一个唯一的div。您将把数据加载到div中。使用jQuery.data
将div设置为loaded
，这样每隔一次单击都不会触发ajax（除非有理由这样做，就像非常动态的数据一样）。然后在按钮之间单击只会更改css显示
（或触发fadeIn
-fadeOut
）
下一件事：为什么要使用委托
？首先，这是过时的（在

上使用

），其次：菜单在其生命周期内是否会更改？如果没有，那就没有意义了
最后：去掉那些设置超时
。编写如下简单代码：
show preloader --> on fadeIn callback load data -->
--> on load callback do some stuff -->
--> hide preloader

现在我只能说这些了。我希望这能有点帮助。如果没有，那我只能祝你好运了！：）
 这是您当前的代码：
function configureEvents() {

    window.setTimeout(function() {

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

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

    }, 200);

}

如您所见，fadeOut
调用位于load（）
回调的外部，这意味着淡出立即发生——它不等待load
事件
尝试将其放入load
回调中（最后）：

顺便问一下，暂停的原因是什么？
你有没有试过把$（“partypreloader”）.fadeOut（“slow”）在load（）
回调中？您好，但这基本上就是配置淡出（）的内容会，因为它也被放置在load（）
回调中。它在load（）
回调中？我不明白…嗯，我是个乞丐，所以我可能一直都错了。我还以为这是回调：$（“#整个ajax内容一”）.load（pageToLoad，function（）{configureFadeOut（）；}）？啊，我明白了。配置场馆
功能是什么样子的？为什么您要发布configureEvents
的代码？我以为是场馆出了问题，不是活动……嗨，怪胎，谢谢，我会去的！但可以肯定的是，由于每个内容都有自己的div，我是在页面加载时还是在按下按钮后加载它们？其次，如果它们都是在页面加载时加载的，这会不会降低浏览器的速度？不，不会。每个div
一开始都是空的（否则使用ajax毫无意义：）。您执行处理代码，并在$（document.ready（..）
中人工触发单击默认菜单元素（因此在整个页面加载时加载第一个div的内容）。我就是这样做的，例如在jQueryUI选项卡中，就是这样做的（因此我认为这是一个很好的实践）。但主要问题是同一负载被调用了两次！我只是再看一遍我的代码，注意到你提到的我做的愚蠢的事情。因此，我删除了配置场馆
中的加载
功能，并注意到场馆内容不再加载。我想我会按照你和Sime所说的重做代码，看看结果是什么：）我现在睡一会儿，一醒来就回去。谢谢你，怪人！：）嗨，怪胎，我仔细考虑了你的答案，从长远来看，这就是网站的运作方式。非常感谢！哦，真的。在我的回答中遗漏了这一点。有趣的是，直到freakish也提到这一点，我才注意到这一点。超时是一个“假加载”的想法，目的是给代码多一点加载时间。但是，我注意到现在的问题是我的开关函数代码加载不起作用，因为我还注意到我使用了两次.load
函数。一次在切换功能中，一次在配置事件
和配置场馆
功能中。。。从configureVinces
中删除.load实际上会停止加载内容，这意味着切换功能加载已中断。好的，回到画板上：）我现在要睡一会儿，一醒来就回来。谢谢！：）@普法姆夫，你可以这么做。我去做个煎蛋饼。好吃的
function configureEvents() {

    window.setTimeout(function() {

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

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

    }, 200);

}