Как добавить загрузку (fade in / fade out) загрузку анимации в turbolinks [duplicate]

Question

Как добавить загрузку (fade in / fade out) загрузку анимации в turbolinks [duplicate]

Это одно из мест, с помощью которого привязка данных, используемая во многих новых фреймворках JavaScript, будет очень полезна для вас ...

Итак, если вы используете Angular, React или любые другие фреймворки, которые делают два способа связывания данных, эта проблема просто исправлена для вас, поэтому простым языком ваш результат undefined на первом этапе, поэтому вы получили result = undefined до получения данных, а затем, как только вы получите результат , он будет обновляться и присваиваться новому значению, которое отвечает на ваш вызов Ajax ...

Но как вы можете сделать это в чистом javascript или jQuery, например, как вы задали этот вопрос?

Вы можете использовать обратный вызов, обещание и недавно наблюдаемое, чтобы обрабатывать его для вас, например, в обещаниях мы имеем некоторые функции, такие как success () или then (), которые будут выполняться, когда ваши данные будут готовы для вас, с функцией обратного вызова или подписки на наблюдаемые.

Например, в вашем случае, в котором вы используете jQuery, вы можете сделать что-то вроде этого:

$(document).ready(function(){
    function foo() {
        $.ajax({url: "api/data", success: function(data){
            fooDone(data); //after we have data, we pass it to fooDone
        }});
    };

    function fooDone(data) {
        console.log(data); //fooDone has the data and console.log it
    };

    foo(); //call happens here
});

Для получения дополнительной информации n изучение обещаний и наблюдаемых, которые являются новыми способами для создания асинхронных материалов.

14

ruby-on-rails turbolinks

задан user3167213 11 March 2015 в 23:36

3 ответа

Другие вопросы по тегам:

ruby-on-rails turbolinks

Похожие вопросы:

score 5 · Answer 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')
    }  
...

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

score 1 · Answer 2

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

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
}

Демо

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

score 2 · Answer 3

Это не представляется возможным.

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

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

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

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