显示页面一旦完全加载涡轮链接

Show page once FULLY loaded with Turbolinks

本文关键字：加载 链接 显示      更新时间：2023-09-26

我正在使用涡轮链接，并且页面之间有一个加载动画。 我目前正在使用 page：load 来完成动画，但是，似乎 page：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);
    })()

此解决方法适用于涡轮链接 5，但应该易于调整。

加载会立即出现，因为 turbolinks 缓存，它会在进行 ajax 调用之前呈现页面，从而破坏动画。

为了使加载效果正常工作，我们必须禁用它：

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

然后我们可以做这样的事情：（使用动画.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')
    }  
...

这样，过渡就很好很顺利了。

开箱即用，这似乎是不可能的。

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

在page:load上，您将设置一个 imagesLoaded 观察器，您可以在其中触发动画结尾。这样，您可以将其延迟到加载所有新图像...

代码如下所示：

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

试试这个：

.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
}

演示

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

相关文章：