将 CSS 预加载器添加到动态页面加载器

Question

so I came across this snippet below which is fantastic at changing my pages within a div. However, I'm scratching my head on how I can do the following:

1. make it so it fades in a CSS preloader egpreload ( https://projects.lukehaas.me/css-loaders/ )
2. it then to show this preloader for x amount of seconds
3. Then for the preloader to fade out and show the content.

If anyone out there can help me point me in the right direction, a big thank you in advance.

$(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

You should create a div on first level of body and the rest content could be added in sibling div. Keep this sibling div class hidden , in hidden class keep display: none.

.hidden {
display: none;
}

When you want to close the loader, added hidden class to it and remove it from this sibling div. For smooth motion you could use CSS transition

If you are using Jquery, then

$(window).load(unHideContain)

this will call the unHideContain when window is loaded. Till then a css generater loader or a full size loading .gif can display loading.

Alternatively you can also use Jquery FadeIn

For doing it static timely as stated, which is not a good and recommeneded solution, you can do is

window.setTimeout(unHideContain,5000)