2

I am trying to show a loading spinner while safari and safari iOS is loading the next page.

I've managed to achieve this in Chrome + Firefox. I'm not fussed if doesn't work in IE.

So the script below works fine in Chrome + Firefox, but doesn't work in Safari or Safari iOS.

I'm guess the behaviour 'window.location.href' is different, but is there a work around to fix this?

// stop home screen webapp from exiting the webwapp into mobile safari
$("a").not('[href="#"]').each(function() {

    // bind click action
    $(this).on("click", function(e) {

        // reveal loader spinner
        $('.loading').addClass('show');

        // window href simulate click within webapp
        window.location.href = $(this).attr('href');

        // prevent default click
        e.preventDefault();

    });

});
joshmoto
  • 4,472
  • 1
  • 26
  • 45
  • window.location.href will immediately change the page. You need Ajax to load a page without clearing the scripts on the page. It is pure luck it works in the other browsers. Also try touchstart as well as click – mplungjan Oct 29 '18 at 14:17
  • If page navigates away, nothing you can really do since it is a new page loading. You can add a slight delay to make it show the image, than navigate, but that is just making your users wait longer for a page to load.... – epascarello Oct 29 '18 at 14:18
  • But it works in Chrome and firefox. I thought the scripts would run in order. So window.location.href would only fire once the add class script has completed. – joshmoto Oct 29 '18 at 14:18
  • [But it works in ...](https://www.google.nl/search?q="but+it+works+in"+site%3Astackoverflow.com) – mplungjan Oct 29 '18 at 14:19
  • 1
    @joshmoto Yes it adds the class, BUT it does not mean that the browser has time to repaint (update the screen) and you navigate away which basically says "Stop updating because I am leaving" – epascarello Oct 29 '18 at 14:30
  • I just added a callback on the add class and it seems to working now – joshmoto Oct 29 '18 at 14:32
  • @joshmoto Can you show the code you used when you say you just added a callback? We have a similar question posted at https://stackoverflow.com/questions/56142250/ios-safari-pauses-animation-on-window-location-href if you would be kind enough to answer that. It’s also for an iOS PWA. – user1946932 May 15 '19 at 22:12
  • @user1946932 let me check it out gimme 10 – joshmoto May 15 '19 at 22:14
  • @joshmoto Thanks. Take your time. – user1946932 May 15 '19 at 22:14

0 Answers0