使用Turbolinks在页面完全加载后显示页面

Question

使用Turbolinks在页面完全加载后显示页面

javascriptjqueryhtmlruby-on-railsturbolinks

14

我正在使用Turbolinks，我有一个在页面之间发生的加载动画。我目前正在使用page:load来完成动画，但似乎page:load的作用类似于文档准备就绪而不是window.onload。

期望的效果是，在加载页面时显示在内容上方的覆盖层，并带有顶部的加载动画。一旦页面完全加载（包括图片、对象等），它将淡出覆盖层以显示内容。

现在发生的情况是，在页面完全加载之前就显示了内容。以下是我正在使用的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);
    })()

- user3167213

3个回答

2

这个问题似乎无法直接解决。

我的解决方案是使用像imagesLoaded这样的库。

在page:load事件中，您可以设置一个imagesLoaded观察器，在其中触发您的动画结束。这样，您就可以延迟动画，直到所有新图像都加载完毕...

代码应该类似于这样：

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

- severin

0

试试这个：

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
}

演示

（再次按输出按钮以刷新演示）

- ayunami2000

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Arnold Roa · Accepted Answer

这个解决方法适用于turbolinks 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')
    }  
...

有了这些，过渡就会变得更加平稳。