显示页面一次完全加载Turbolinks [英] Show page once FULLY loaded with Turbolinks
问题描述
我使用Turbolinks，并且在页面之间发生加载动画。我目前正在使用page：load来完成动画，但看起来好像页面：load的行为就像文档准备好了，而不是window.on load。
期望的效果是我在页面加载时在内容上显示了一个叠加层，并在其上加载了一个加载动画。一旦页面完全加载（包括图像，对象等），它将淡出覆盖层以显示内容。
发生的事情是在页面完全加载之前显示的内容。这里是我正在使用的JavaScript。
（function（）{
函数showPreloader（）{
Turbolinks.enableProgressBar ）;
$（'＃status'）。fadeIn（'slow'）;
$（'＃preloader'）。delay（300）.fadeIn（'slow'）;
}
函数hidePreloader（）{
$（'＃status'）。fadeOut（）;
$（'＃preloader'）。delay（300）.fadeOut（'slow '）;
}
$（document）.on（'page：fetch'，showPreloader）;
$（document）.on（'page：load'，hidePreloader ）;
$（window）.on（'load'，hidePreloader）;
}）（）
这个解决方法适用于turbolinks 5，但应该很容易适应。
加载会立即出现因为turbolinks缓存，它会在ajax调用之前呈现页面，并破坏动画。
为了获得加载效果，我们必须禁用它：
< HEAD>
....
< meta name =turbolinks-cache-controlcontent =no-cache>
然后我们可以这样做：（使用animated.css）
$（document）.on（'turbolinks：click'，function（）{
$（'。page-content'）
.addClass（'animated fadeOut'）
.off（'webkitAnimationEnd oanimationend msAnimationEnd animationend'）
}）;
$ b $（document）.on（'turbolinks：load'，function（event）{
//如果调用被turbolinks触发
if（event。 （'webkitAnimationEnd oanimationend msAnimationEnd animationend'，function（（））{
$（'。page-content'）
.addClass（'animated fadeIn'）
.one ）{
$（'。page-content'）。removeClass（'animated'）;
}）;
} else {
$（'。page-content'） .removeClass（'hide'）
}
...
，过渡非常顺利。
I am using Turbolinks and I have a loading animation that happens between pages. I am currently using page:load to complete the animation however, it seems as if page:load is acting like document ready rather than window.on load.
The desired effect is I have an overlay that is displayed over the content while the page is loading with a loading animation on top of it. Once the page is fully loaded (with images, objects, etc) it will then fade out the overlay to show the content.
What is happening is the content is being shown before the page is fully loaded. Here is the javascript I am using.
(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);
})()
This workaround is for turbolinks 5, but should be easy to adapt.
The loading appears instantly because turbolinks cache, it renders the page before the ajax call is made, breaking the animation.
In order to get a loading effect working we must disable it:
<head>
....
<meta name="turbolinks-cache-control" content="no-cache">
Then we can do something like: (using 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')
}
...
With that, the transition is nice and smooth.
这篇关于显示页面一次完全加载Turbolinks的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
