使用 Turbolinks 完全加载后显示页面
Posted
技术标签:
【中文标题】使用 Turbolinks 完全加载后显示页面【英文标题】：Show page once FULLY loaded with Turbolinks 【发布时间】：2015-05-13 22:45:15 【问题描述】：我正在使用 Turbolinks，并且我有一个在页面之间发生的加载动画。我目前正在使用 page:load 来完成动画，但是似乎 page:load 的行为就像是文档就绪而不是 window.on 加载。
想要的效果是我有一个覆盖显示在内容上，而页面正在加载，其顶部有一个加载动画。一旦页面完全加载（包含图像、对象等），它将淡出覆盖层以显示内容。
发生的情况是在页面完全加载之前显示内容。这是我正在使用的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】：此解决方法适用于 turbolinks 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')
...
这样，过渡就很流畅了。
【讨论】：
来源是什么意思？ if 是一个工作示例 nop，如果是作者，就是我。【参考方案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
Demo
（再次按下输出按钮刷新演示）
【讨论】：
以上是关于使用 Turbolinks 完全加载后显示页面的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Rails 5 + jQuery 保持通过 Turbolinks 提交的页面状态
rails jquery.turbolinks javascript在页面更改后未触发