將 CSS 預加載器添加到動態頁面加載器

Question

所以我在下面看到了這個片段，它非常適合在 div 中更改我的頁面。 但是，我正在摸索如何執行以下操作：

1. 使它在 CSS 預加載器 egpreload ( https://projects.lukehaas.me/css-loaders/ ) 中消失
2. 然后將這個預加載器顯示 x 秒
3. 然后讓預加載器淡出並顯示內容。

如果那里有人可以幫助我指出正確的方向，在此先非常感謝。

$(function() {

    if(Modernizr.history){

    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;

    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();

    $("nav").delegate("a", "click", function() {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });

    function loadContent(href){
        $mainContent
                .find("#guts")
                .fadeOut(2000, function() {
                    $mainContent.hide().load(href + " #guts", function() {
                        $mainContent.fadeIn(1000, function() {
                            $pageWrap.animate({
                            });
                        });
                        $("nav a").removeClass("current");
                        console.log(href);
                        $("nav a[href$="+href+"]").addClass("current");
                    });
                });
    }

    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); 
       loadContent(_link);
    });

} 


});

Answer 1

您應該在正文的第一級創建一個 div，其余內容可以添加到同級 div 中。 保持這個兄弟 div 類隱藏，在隱藏類中保持顯示：無。

.hidden {
display: none;
}

當你想關閉加載器時，向它添加隱藏類並將其從這個兄弟 div 中刪除。 為了平滑運動，您可以使用 CSS 過渡

如果您使用的是 Jquery，那么

$(window).load(unHideContain)

這將在加載窗口時調用 unHideContain。 直到那時 css 生成器加載器或全尺寸加載 .gif 可以顯示加載。

或者，您也可以使用Jquery FadeIn

為了按規定及時執行靜態操作，這不是一個好的和推薦的解決方案，您可以做的是

window.setTimeout(unHideContain,5000)