Safari back button shows spinner indefinitely
Safari version 9.1.3 on OSX.
Write javascript "onclick" handler on link, which creates a spinner and then directs to given url. Idea is to show spinner while the page is loading pointed by link. Therefore redirection is done using "setTimeout" after creating spinner js code.
Problem is when user hits browser back button after next page is loaded, the spinner is shown again and nothing happens. Here is the function called:
function show_loading_overlay(url) {
var opts = {
lines: 13 // The number of lines to draw
, length: 10 // The length of each line
, width: 5 // The line thickness
, radius: 17 // The radius of the inner circle
, scale: 0.5 // Scales overall size of the spinner
, corners: 1 // Corner roundness (0..1)
, color: '#fff' // #rgb or #rrggbb or array of colors
, opacity: 0.25 // Opacity of the lines
, rotate: 44 // The rotation offset
, direction: -1 // 1: clockwise, -1: counterclockwise
, speed: 0.7 // Rounds per second
, trail: 60 // Afterglow percentage
, fps: 20 // Frames per second when using setTimeout() as a fallback for CSS
, zIndex: 2e9 // The z-index (defaults to 2000000000)
, className: 'spinner' // The CSS class to assign to the spinner
, top: '50%' // Top position relative to parent
, left: '50%' // Left position relative to parent
, shadow: false // Whether to render a shadow
, hwaccel: false // Whether to use hardware acceleration
, position: 'absolute' // Element positioning
};
$('.gbox-overlay, .gbox-loader').show();
var target = $('.gbox-loader')[0];
var spinner = new Spinner(opts).spin(target);
if (url) {
setTimeout(function() {
window.location.href = url;
}, 50);
}
}
I'm experiencing this same problem too with version 2.3.2. When using spin.js to redirect the user to a new page, if the back button is used in Firefox the spinner shows until the page is refreshed. This doesn't happen in Chrome or Edge.
Any update on this?
I don't have a Mac to test Safari with, but my guess is that it's loading the entire state of the previous page when you press the back button. Perhaps you could work around this by stopping the spinner after a period of time, instead of setting it to spin indefinitely.
This worked for me. <script>window.onunload = function () { };</script>