Menu
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);
})()
559
$(document). on('turbolinks:load', function (){ alert("turbolinks on load event works") }); If you reload a page where this JS is running, and the page shows you an alert, turbolinks is working.
Turbolinks saves a copy of the current page to its cache just before rendering a new page. Note that Turbolinks copies the page using cloneNode(true) , which means any attached event listeners and associated data are discarded.
Turbolinks Overview It works by intercepting all link clicks that would navigate to a page within the app, and instead makes the request via AJAX, replacing the body with the received content. The primary speedup comes from not having to download or parse the CSS & JS files again.
If you're a Rails developer, chances are that you know Turbolinks. Turbolinks is a flexible and lightweight JavaScript library aimed to make your navigation through webpages faster. Turbolinks improves webpage performance by substituting the common full-page loads for partial loads in multi-page applications.
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.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
