Question

我正在为商店系统开发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毫秒之后显示加载小部件，因此用户并不总是调用加载小部件，尽管页面即将接近。

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

可悲的是，没有任何特殊事件可以在装载机启动时调用。

如果您与我分享您的想法，我会很高兴。：）

Answer 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 }); });

这不是我计划的解决方案，但目前工作正常......

为jquery移动加载程序小部件创建延迟

1 个答案: