Mostra pagina caricata COMPLETAMENTE con Turbolinks

Sto usando Turbolinks e ho un'animazione di caricamento che avviene tra le pagine. Attualmente sto usando la pagina: carica per completare l'animazione, comunque, sembra come se la pagina: il carico agisce come un documento pronto piuttosto che una finestra. Sul caricamento.Mostra pagina caricata COMPLETAMENTE con Turbolinks

L'effetto desiderato è che ho una sovrapposizione che viene visualizzata sul contenuto mentre la pagina viene caricata con un'animazione di caricamento su di essa. Una volta che la pagina è stata caricata completamente (con immagini, oggetti, ecc.), Verrà sfumata la sovrapposizione per mostrare il contenuto.

Quello che sta accadendo è che il contenuto viene mostrato prima che la pagina sia completamente caricata. Ecco il javascript che sto usando.

(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); 
    })()

fonte

2015-03-11 user3167213

Questa soluzione è per i turbolinks 5, ma dovrebbe essere facile da adattare.

Il caricamento viene visualizzato immediatamente perché la cache dei turbolinks, rende la pagina prima che venga effettuata la chiamata ajax, interrompendo l'animazione.

Al fine di ottenere un effetto di carico di lavoro dobbiamo disabilitarlo:

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

allora possiamo fare qualcosa di simile a: (usando 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') 
    } 
...

Con ciò, la transizione è bello e liscio.

fonte

2017-09-20 23:18:53

hai qualche fonte per la vostra soluzione? –

cosa intendi per fonte? se è un esempio operativo nop, se è l'autore, sono io. –

Out of the box questo sembra impossibile.

La mia strategia per una soluzione sarebbe quella di utilizzare una libreria come imagesLoaded.

Su page:load si installa un imagesLoaded osservatore in cui si attiva la fine dell'animazione. In questo modo è possibile ritardare fino a quando tutte le nuove immagini vengono caricate ...

il codice sarebbe simile a questa:

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

fonte

2017-09-21 09:51:00 severin

Prova questo:

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

(Premere il pulsante di uscita di nuovo per aggiornare demo)

fonte

2017-09-22 19:26:57

Mostra pagina caricata COMPLETAMENTE con Turbolinks

risposta

Problemi correlati