在页面之间导航时显示加载程序 - PWA [英] Showing loader while navigating between pages - PWA

问题描述

我有一个基于PHP的网站。

I have a PHP based website.

我使用过 service-workers 和 manifest.json 将网站转换为 PWA 。

I have used service-workers and manifest.json to convert the website into a PWA.

现在当我从主屏幕启动PWA时，它正常工作像一个APP。但是，问题在于，由于PWA不显示浏览器地址栏，因此用户无法知道正在重新加载页面或正在加载下一页。 当他们点击某个内容时，下一页被加载但没有显示加载指示。

Now when I launch the PWA from my Homescreen, it works normally like an APP. But, the problem is that since PWAs does not show browser address bar, user has no way of knowing that the page is being reloaded or the next page is being loaded. When they click something next page gets loaded but no loading indicator is shown.

所以，现在我需要在页面之间导航时添加加载动画。由于所有页面都在不同的URL，并且它们不是主框架。

So, now i need to add loading animation while navigating between pages. As all pages are at different URL and their is no master frame.

我无法找到解决办法。

推荐答案

理论

您需要做的是在页面的生命周期中两次显示加载动画：在启动时和关闭之前。如果你这样做，第一页的结束动画将把用户带到第二页的开始动画，用户将通知应用程序的状态。

What you need to do is to show a loading animation at two times in a page's life cycle: at startup and before closing down. If you do that, first page's closing animation will take user to second page's starting animation, and user will be informed by the state of the app.

练习

1）开始动画

我认为 document.ready jQuery事件是让我们放松的好时机用户与页面进行交互。因此，加载页面时，加载动画将处于活动/显示状态。一旦页面加载并准备好进行用户交互，您将结束动画。

I think document.ready event of jQuery is a good time to let the user to interact with the page. So the loading animation will be active/shown when the page is loaded. And you will end the animation once the page is loaded and ready for user interaction.

.ready（）方法提供了一种运行方式一旦
页面的文档对象模型（DOM）变得可以安全操作，JavaScript代码就会立即生效。这个
通常是在
用户查看或与页面交互之前执行所需任务的好时机，例如添加事件
处理程序并初始化插件。

The .ready() method offers a way to run JavaScript code as soon as the page's Document Object Model (DOM) becomes safe to manipulate. This will often be a good time to perform tasks that are needed before the user views or interacts with the page, for example to add event handlers and initialize plugins.

2）结束动画

为此，我使用< a href =https://developer.mozilla.org/en/docs/Web/Events/beforeunload =nofollow noreferrer> onbeforeunload 事件浏览器。

For this, I use onbeforeunload event of the browser.

当窗口，文档及其
资源即将卸载时，会触发beforeunload事件。

The beforeunload event is fired when the window, the document and its resources are about to be unloaded.

onbeforeunload 当用户点击链接或以其他方式触发导航时自动触发处理。所以只要听一遍，你就可以开始结束动画。

onbeforeunload fires automatically when user clicks to a link or otherwise triggers a navigation process. So just by listening to that, you can start your ending animation.

然后结束动画将在用户触发导航时开始，并且会受到开始动画的欢迎下一页。因此，将从用户点击开始转换，并以下一页加载结束。就像应用程序一样。

Then ending animation will start as the user triggers a navigation, and will be welcomed by the starting animation of the next page. So there will be transition starting with a user click and ending with next page loading. Just like apps do.

代码

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

Here's a snippet from the code I normally use;

$(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();
    });
});

这里有一个小提琴，还有完整的样式和HTML

希望有所帮助。

这篇关于在页面之间导航时显示加载程序 - PWA的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！