我有一个基于PHP的网站。

我已经使用service-workersmanifest.json将网站转换为PWA

现在,当我从主屏幕启动PWA时,它通常像APP一样工作。但是,问题在于,由于PWA不显示浏览器地址栏,因此用户无法知道正在重新加载页面或正在加载下一页。 当他们单击某些内容时,将加载下一页,但是不会显示任何加载指示器。

因此,现在我需要在页面之间导航时添加加载动画。由于所有页面使用不同的URL,因此它们不是主框架。

我无法找出解决方案。

最佳答案

理论

您需要做的是在页面的生命周期中两次显示加载动画:启动时为,关闭之前为。如果执行此操作,则第一页的结束动画将使用户转到第二页的起始动画,并且将通过应用程序的状态通知用户。

练习

1)开始动画

我认为jQuery的 document.ready 事件是让用户与页面进行交互的好时机。因此,在加载页面时,加载动画将处于 Activity 状态/显示。页面加载完毕并准备好与用户交互后,您将结束动画。



2)结束动画

为此,我使用浏览器的 onbeforeunload 事件。



当用户单击链接或触发导航过程时,onbeforeunload会自动触发。因此,只需听一听,就可以开始结束动画了。

然后,随着用户触发导航,结束动画将开始,并受到下一页开始动画的欢迎。因此,将发生过渡,从用户单击开始,到下一页加载结束。就像应用程序一样。

代码

这是我通常使用的代码片段;

$(function () {
    // page is loaded, it is safe to hide loading animation
    $('#loading-bg').hide();
    $('#loading-image').hide();

    $(window).on('beforeunload', function () {
        // user has triggered a navigation, show the loading animation
        $('#loading-bg').show();
        $('#loading-image').show();
    });
});

Here's a fiddle also with complete styles and HTML

希望能有所帮助。

关于javascript - 在页面之间导航时显示加载程序-PWA,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41951367/

10-09 18:02
查看更多