show and hide spinner with jquery : does not work on Iphone, safary etc

50
October 22, 2019, at 7:00 PM

I am trying to show / hide a spinner with JQuery. Basicaly I have this code :

function unLoader(e) {
    $(".site-content").hide();
    $(".loading").show();    
    }
   $(window).on('load', function() {
         $(".loading").hide();
         $(".site-content").show();
          window.onbeforeunload = unLoader;
    });

It works fine with Chrome and FireFox on Windows , on Chrome on MacOS. But it does not work on Safari MacOS. It does not work on Safari Iphone or Chrome Iphone.

Trying to change the eventName does not resolve the problem :

var isOnIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);    
var eventNameHide = isOnIOS ? "pagehide" : "beforeunload";
var eventNameShow = isOnIOS ? "pageshow" : "load";

Any help would be apreciated.

Answer 1

In your context the $().on("load") function is unclear. You can use document ready for check if document loaded.

$(document).ready(function() {
         $(".loading").hide();
         $(".site-content").show();
          window.onbeforeunload = unLoader;
    });

and also if you want to use your actually code, you need to defined the pagehide method. Please try:

var isOnIOS = navigator.userAgent.match(/iPad/i)|| navigator.userAgent.match(/iPhone/i);    
var eventNameHide = isOnIOS ? "pagehide" : "beforeunload";
$(document).ready(function() {
    $(".loading").hide();
    $(".site-content").show();
    window.addEventListener(eventNameHide, function (event) { 
        window.event.stopPropagation(); //trying with and without
        $(".site-content").hide();
        $(".loading").show(); 
    });
});
READ ALSO
Using beforeSend and complete in every instance of ajaxForm globally

Using beforeSend and complete in every instance of ajaxForm globally

I am trying to use the beforeSend and complete functions on all ajaxForms in a projectI would like to do this without adding the exact bit a code all throughout the project

25
Convert a SQL query to Laravel Eloquent

Convert a SQL query to Laravel Eloquent

I'm trying to achieve something like the following:

42
Does jquery success function assume status code 200?

Does jquery success function assume status code 200?

In an ajax success function, is it assumed the status code is 200? or could it be successful if you return 304 or 503?

29
How to optimize “ScrollMagic+TweenMax+GSAP” performance?

How to optimize “ScrollMagic+TweenMax+GSAP” performance?

At first sight an easy animation causes lags and is choppy on mobile devicesIt looks quite normal on PC resolution, but not on mobile

22