Добавление CSS предварительного загрузчика в Dynami c Page loader - PullRequest
Новая
       18

Добавление CSS предварительного загрузчика в Dynami c Page loader

1 голос
/ 13 января 2020

, поэтому я наткнулся на этот фрагмент ниже, который является фантастическим c при изменении моих страниц в div. Однако я ломаю голову над тем, как я могу сделать следующее:

  1. сделать так, чтобы он выцветал в CSS preloader egpreload (https://projects.lukehaas.me/css-loaders/)
  2. это затем, чтобы показать этот предварительный загрузчик в течение х количество секунд
  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);
    });

} 


});

1 Ответ

2 голосов
/ 13 января 2020

Вы должны создать div на первом уровне тела, а остальное содержимое можно добавить в div брата. Держите этот дочерний класс div скрытым, в скрытом классе оставьте отображение: нет. 

.hidden {
display: none;
}

Если вы хотите закрыть загрузчик, добавьте в него скрытый класс и удалите его из этого элемента. Для плавного движения вы можете использовать CSS transition

. Если вы используете Jquery, то 

$(window).load(unHideContain)

это вызовет unHideContain при загрузке окна. До этого загрузчик генератора css или полноразмерная загрузка .gif может отображать загрузку.

В качестве альтернативы вы также можете использовать Jquery FadeIn

Для этого c своевременно, как указано, что не является хорошим и рекомендуемым решением, вы можете сделать это 

window.setTimeout(unHideContain,5000)
...