Javascript 使用TurboLink完全加载后显示页面
我使用的是TurboLink，我有一个在页面之间加载的动画。我目前正在使用page:load来完成动画，但是，看起来page:load的行为就像文档准备就绪，而不是window.on load 理想的效果是，我有一个覆盖，显示在内容上，而网页加载与加载动画的顶部。一旦页面完全加载（包含图像、对象等），它将淡出覆盖以显示内容 发生的事情是在页面完全加载之前显示内容。下面是我正在使用的javascriptJavascript 使用TurboLink完全加载后显示页面,javascript,jquery,html,ruby-on-rails,turbolinks,Javascript,Jquery,Html,Ruby On Rails,Turbolinks,我使用的是TurboLink，我有一个在页面之间加载的动画。我目前正在使用page:load来完成动画，但是，看起来page:load的行为就像文档准备就绪，而不是window.on load 理想的效果是，我有一个覆盖，显示在内容上，而网页加载与加载动画的顶部。一旦页面完全加载（包含图像、对象等），它将淡出覆盖以显示内容 发生的事情是在页面完全加载之前显示内容。下面是我正在使用的javascript (function () { function showPreloade
(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);
})()
此解决方案适用于turbolinks 5，但应易于适应 加载会立即出现，因为turbolinks缓存会在ajax调用之前呈现页面，从而破坏动画 为了使加载效果生效，我们必须禁用它：
<head>
....
<meta name="turbolinks-cache-control" content="no-cache">
这样的话，过渡就很顺利了。开箱即用似乎是不可能的 我的解决方案策略是使用类似的库 在
页面：load$(document).on('page:load', function() {
$('body').imagesLoaded(hidePreloader);
});
（再次按下输出按钮刷新演示）您所说的源是什么意思？如果是一个有效的例子不，如果是作者，那就是我。
$(document).on('page:load', function() {
$('body').imagesLoaded(hidePreloader);
});
<!--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/">
window.onload=function(){
document.querySelector("#pgloader").style.display="none";
//maybe other stuff too
}