Pokaż stronę raz W PEŁNI załadowano Turbolinks

Używam Turbolinks i mam animację ładowania, która dzieje się między stronami. Aktualnie używam strony: load do ukończenia animacji, ale wygląda na to, że strona: load działa jak plik gotowy do pracy, a nie window.on.Pokaż stronę raz W PEŁNI załadowano Turbolinks

Pożądanym efektem jest nakładka, która jest wyświetlana nad treścią podczas ładowania strony z animacją ładowania na wierzchu. Po pełnym załadowaniu strony (obrazami, obiektami itp.), Zniknie nakładka, aby pokazać zawartość.

Co się dzieje, zawartość jest wyświetlana, zanim strona zostanie w pełni załadowana. Oto javascript, którego używam.

(function() { 

     function showPreloader() { 
     Turbolinks.enableProgressBar(); 
     $('#status').fadeIn('slow'); 
     $('#preloader').delay(300).fadeIn('slow'); 
     } 

     function hidePreloader() { 
     $('#status').fadeOut(); 
     $('#preloader').delay(300).fadeOut('slow'); 
     } 

     $(document).on('page:fetch', showPreloader); 
     $(document).on('page:load', hidePreloader); 
     $(window).on('load', hidePreloader); 
    })()

Źródło

2015-03-11 user3167213

To obejście dotyczy turbolinków 5, ale powinno być łatwe do dostosowania.

Ładowanie pojawia się natychmiast, ponieważ bufora turbolinks, renderuje stronę przed wywołaniem ajax, łamanie animacji.

W celu uzyskania efektu ładowania pracy musimy ją wyłączyć:

<head> 
.... 
    <meta name="turbolinks-cache-control" content="no-cache">

Wtedy możemy zrobić coś takiego: (używając animated.css)

$(document).on('turbolinks:click', function(){ 
    $('.page-content') 
    .addClass('animated fadeOut') 
    .off('webkitAnimationEnd oanimationend msAnimationEnd animationend') 
}); 


$(document).on('turbolinks:load', function(event){ 
    // if call was fired by turbolinks 
    if (event.originalEvent.data.timing.visitStart) { 
     $('.page-content') 
     .addClass('animated fadeIn') 
     .one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){ 
      $('.page-content').removeClass('animated'); 
     }); 
    }else{ 
     $('.page-content').removeClass('hide') 
    } 
...

Z tym, że przejście jest miło i gładko.

Źródło

2017-09-20 23:18:53

masz żadnego źródła dla obejścia? –

co masz na myśli przez źródło? jeśli jest działającym przykładem nop, jeśli jest autorem, to ja. –

Po wyjęciu z pudełka nie jest to możliwe.

Moja strategia rozwiązania polegałaby na użyciu biblioteki takiej jak imagesLoaded.

Na page:load należy ustawić obserwatora Loaded, w którym uruchamia się zakończenie animacji. W ten sposób można go opóźnić aż wszystkie nowe obrazy są ładowane ...

kod będzie wyglądał mniej więcej tak:

$(document).on('page:load', function() { 
    $('body').imagesLoaded(hidePreloader); 
});

Źródło

2017-09-21 09:51:00 severin

Spróbuj:

HTML:

<!--top--> 
<div style="background-color: 
/*background color*/ 
white 
;width:100vw;height:100vh;z-index:999999;position:fixed;top:0;left:0;right:0;bottom:0;background:url(
/*or URL*/ 
background.jpg 
) center center no-repeat;background-size:cover;" id="pgLoader"> 
<!--document.querySelector("#pgloader loader") 
where loader goes--> 
<loader style="position:fixed;top: 
/*may need to change*/ 
40% 
;left:0;right:0;bottom:0;width:100%;height:100%;text-align:center;"> 
Loading... 
</loader> 
</div> 
<!--rest of page--> 
<h1>hello!</h1> 
Blablabla 
<img src="http://lorempixel.com/200/200/abstract/">

JS:

window.onload=function(){ 
document.querySelector("#pgloader").style.display="none"; 
//maybe other stuff too 
}

Demo

(Naciśnij przycisk ponownie, aby odświeżyć wyjście demo)

Źródło

2017-09-22 19:26:57

Pokaż stronę raz W PEŁNI załadowano Turbolinks

Odpowiedz

Powiązane problemy