Показывать страницу один раз ПОЛНОСТЬЮ загружена Turbolinks

Я использую Turbolinks, и у меня есть анимация загрузки, которая происходит между страницами. В настоящее время я использую страницу: load для завершения анимации, похоже, что страница: load действует как документ, готовый, а не window.on load.

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

Что происходит, так это показ содержимого до полной загрузки страницы. Вот javascript, который я использую.

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

Ответ 1

Этот обходной путь предназначен для турбонасосов 5, но его легко адаптировать.

Загрузка происходит мгновенно, потому что таймер turbolinks, он отображает страницу перед вызовом ajax, разбивая анимацию.

Чтобы получить эффект загрузки, мы должны отключить его:

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

Затем мы можем сделать что-то вроде: (используя 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')
    }  
...

При этом переход приятный и плавный.

Ответ 2

Из коробки это кажется невозможным.

Моя стратегия для решения заключалась бы в использовании библиотеки типа imagesLoaded.

В page:load вы должны установить наблюдателя imagesLoaded, в котором вы завершаете анимацию. Таким образом вы можете отложить его до загрузки всех новых изображений...

Код выглядит примерно так:

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

Ответ 3

Попробуйте следующее:

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
}

Демо

(Нажмите кнопку вывода еще раз, чтобы обновить демонстрацию)