为 jquery 移动加载器小部件创建延迟答案

【问题标题】：Create a delay for jquery mobile loader widget为 jquery 移动加载器小部件创建延迟
【发布时间】：2023-12-27 16:10:02
【问题描述】：

我正在为商店系统开发 jquery.mobile 应用程序。

基本上我的想法如下：为了提高可用性和用户体验，我有一个带有旋转比萨饼的全屏加载器小部件，每当 jquery mobile 通过 AJAX 加载页面时就会显示该小部件。到目前为止，使用提供的本机选项效果很好。

现在我尝试解释我的问题：当然，向用户显示应用程序正在加载是很棒的。但是，例如，当连接到家里的无线 LAN 时，加载时间是最短的。尽管如此，加载器总是会出现一秒钟，这让应用程序感觉不像是真正的原生应用程序。

现在我阅读了有关缓存系统的信息并尝试了它，它工作正常。据我了解，页面缓存会通过添加延迟来禁用加载器。

这是我的 jquery.mobile.custom.js 中的代码（大约第 5358 行）

    _showLoading: function( delay, theme, msg, textonly ) {
        // This configurable timeout allows cached pages a brief
        // delay to load without showing a message
        if ( this._loadMsg ) {
            return;
        }

        this._loadMsg = setTimeout($.proxy(function() {
            this._getLoader().loader( "show", theme, msg, textonly );
            this._loadMsg = 0;
        }, this), delay );
    },

所以这正是我所需要的。我想仅在大约 200 - 500 毫秒后显示加载小部件，因此用户并不总是调用加载小部件，尽管页面立即接近那里。

是否有人已经有解决方案的经验？这对开发者来说是一个有用的补充或建议吗？

遗憾的是，没有提到任何可以在加载程序启动时调用的特殊事件。

如果您能与我分享您的想法，我会很高兴。 :)

【问题讨论】：

最好的办法，就是自己修改jQM JS。因为_showLoading是私有函数，不能扩展到jQM JS的范围之外。
您能否使用 setTimeout 将旋转披萨的显示延迟 200-500 毫秒，然后在新页面加载时清除超时？这样，只有更长的 AJAX 调用才会显示旋转的披萨。
这正是我计划做的。但由于加载器小部件本身无法修改，我无法影响事件。我添加了一个可能的解决方案，效果接近你提到的。

标签： ajax jquery-mobile delay loader

【解决方案1】：

编辑：

以下解决方案不能在每台设备上正常工作......所以它非常有限。我目前正在寻找更好的解决方案。我会告诉你的！

如果要升级，修改框架只是麻烦。 :)

通过在加载器再次显示和隐藏时对 DOM 的修改进行进一步研究，我找到了一个无需更改 jquery 或 jq-mobile 方法的解决方案：我正在使用 MutationObserver API：https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver?redirectlocale=en-US&redirectslug=DOM%2FMutationObserver

$j(document).bind('pageshow', function() {
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            if($j(mutation.target).hasClass('ui-loading')) {
                $j('.ui-loader').css('visibility', 'hidden');
                setTimeout(function() { $j('.ui-loader').css('visibility', 'visible'); }, 300);
            }
            else {
                $j('.ui-loader').css('visibility', 'visible');  
            }
        })
    });
    observer.observe(document.querySelector('html'), { attributes: true });     
});

这不是我计划的解决方案，但目前效果很好......

【讨论】：