我有一个基于PHP的网站。
我已经使用service-workers
和manifest.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/