更优雅的加载#container如谷歌浏览器

问题描述

我有一段代码来显示简单加载，例如通过点击操作（在我的例子中是ajax方面搜索）

到目前为止它完成了工作。

/!\ 请不要混淆，仔细阅读和查看插图，没有代码或PHP 文件或html修改。我们只注入一个 snippet 并在页面中指定一个空的 #div /!\

add_action( 'wp_head',function () { ?>
    
    <style>
    #loading-container {
    display:relative;
    }
    .custom-loader {
    z-index:999;
    display:flex;
    position:fixed;
    padding:0;
    margin:0;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    align-content:center;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:18px;
    font-weight:400;    
    color: white;
    background-color:rgba(0,0.8);
    background-size:cover;
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none;
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    }
    .custom-loader i{
    margin-right:5px;
    margin-left:5px;
    }
    </style>
    
    <script>
    (function($) {
    $(document).on('facetwp-refresh',function() {
    if (FWP.loaded) {$('#loading-container').prepend('<div class="custom-loader facetwp-loading"><i class="fas fa-sync fa-spin"></i><a>Loading...</a></div>');}
            
            });
        
            $(document).on('facetwp-loaded',function() {
                $('.custom-loader').remove();
            });
        })(jQuery);  
        </script>
        
    <?PHP } );

我在极少数情况下注意到是因为网络吗？或其他任何无法解释的情况，加载冻结，我们只能看着fa-sync 永远旋转...哎哟！对用户体验非常不利...>

我的问题：如何使其更具可定制性？例如，在 x 毫秒后 显示一条消息。想象一下，加载时间最多不会超过 4-5 秒，否则就会出现真正的问题...

(like google chrome no network error)

显示带有链接或按钮的错误消息以重置页面。

（在我的情况下，它将重置按钮 onclick = "FWP.reset" ）

让用户知道当前请求发生了错误。

我还希望能够针对每个任务使用个性化消息对其进行一些修改，例如：

页面刷新时的操作 = 正在加载...

点击 Facet / search-btn 时的动作 = 一瞬间...

操作重置按钮 = 页面重置...

所以亲爱的用户知道到底发生了什么。

目前这就是我让它工作的方式

元素编辑器

你可以看到我们的隐藏的div部分这是我们的#loading-container 我在任何有facet的页面或部分重做，我觉得不实用..

我必须想出一种更优雅的方式，也许可以添加条件，例如 如果页面中有分面，则应用加载。

如果你理解我在说什么，并且你有更优雅的解决方案，那么谢谢你

解决方法

我相信您正在使用 FacetWP 插件（请确保您准确地提及插件名称，以便我们能够理解）。

我快速浏览了 their documentation 并找不到任何可用于满足您要求的事件/挂钩。但是你可以监听搜索按钮或重置按钮的click事件来触发加载屏幕的显示。以下是可用于处理 on() 事件的 jQuery click 方法文档的链接：https://api.jquery.com/on/

如果您对如何将选择器传递给此 on() 有疑问，只需右键单击该按钮并在浏览器中选择“检查元素”选项（假设您使用的是 Chrome/Firefox 或其他东西）。这会让您对如何选择选择器有所了解。

基于 this example，按钮的点击事件处理程序如下所示：

jQuery('.facetwp-icon').on('click',function(){
  alert('button clicked');
});

另外，我建议您只在加载屏幕之前添加一次。然后使用 jQuery 的 show() 或 hide() 函数在需要时显示或隐藏屏幕，而不是再次删除和前置！

如果您需要自定义事件（而不是像我上面所说的那样监听点击事件），由于这是一个付费插件，请尝试 ping 开发人员。他们可能会帮助您处理额外的代码。

希望我已经给了你一些开始的指示。干杯！

使用 SVG 和其下的一些自定义文本创建加载屏幕。将其包裹在 DIV 中。

使用 CSS 或 {{1}} 将 display 设置为 block 并给它一个高 Z-index，以便它出现在页面上所有其他 HTML 元素之上。这将确保在第一次打开网页时显示加载屏幕。

使用 vanilla Javascript 在页面加载时隐藏加载屏幕 DIV。

<Style>

如果您想为其他一些活动再次调用加载屏幕，例如单击按钮，只需使用 vanilla javascript 创建一个函数来打开和关闭显示，这可以通过计时器或您想要的其他事件来完成用于再次隐藏加载屏幕，下面的示例将传递我们希望加载屏幕显示的毫秒数。

window.addEventListener("load",function(){
    //this code will run after the page is fully loaded 
    // just use some javascript to set the loading screen DIV to display none.
  
 document.getElementById("ENTER_DIV_ID_HERE").style.display = "none";

});

//注意我写了这一切只是徒手，我没有运行代码因为我太累了，但这是它的一般要点。请注意，这绝不是我实现加载屏幕的方式，我总是尝试将其与物理事件（例如文件上传完成等）联系起来，而不仅仅是指定毫秒数，原因是并非所有计算机都是等于某些过程比其他过程更快。

如果您希望您的用户界面即使在网络连接丢失时也能保持响应，那么您建议的超时时间会有所帮助，但要始终如一地处理这个问题，您需要一个 service worker。

Service Worker 是您实现自定义“您离线！”的方式。留言。

基本上，Service Worker 是您所有网络请求的 javascript 代理 - 它在有人访问您的网站时运行，并且可以响应来自您网站的请求即使没有网络连接提供缓存副本，或提供特定的离线消息，让您的 UI JS 可以为用户处理此问题。

他们还可以重试较差的连接，让偶尔的掉线只是让用户加载稍微慢一点（而不是要求他们手动重置/重试）。

Service Worker 是一个巨大的话题，但您可以轻松插入许多简单的现成实现（例如 Workbox）。

Wordpress 有一个 official plug in，他们有如何实现 offline 和 retry 支持的示例。

code-snippets javascript wordpress wordpress