Primefaces overlayPanel 的延迟问题 - 加载到延迟 [英] Latency issue with Primefaces overlayPanel - loads to lazy

问题描述

我将 Primefaces 3.2 与 jsf 2 和 glassfish 3.1.2 一起使用.

I am using Primefaces 3.2 with jsf 2 and glassfish 3.1.2.

我有一个包含用户头像的用户 p:dataTable.每当用户将鼠标移到头像上时，就会出现一个 p:overlayPanel，其中包含有关用户的更多信息(延迟加载)，并在用户移开光标时消失 - 就像这样:

I have a p:dataTable of users containing avatars of the user. Whenever the user moves the mouse over the avatar a p:overlayPanel appears with more information (lazy loaded) on the user, and disappears when the user moves the cursor away - like this:

<p:overlayPanel for="avatar" dynamic="true" showEvent="mouseover" hideEvent="mouseout" ...>

这很有效 - 只要用户行动迟缓".每当用户在许多头像上方快速移动光标时，许多覆盖面板保持可见.例如，当用户将光标移到显示用户头像的位置并使用鼠标的滚轮向下或向上滚动用户表时.

This works very well - as long as the user is "slowhanded". Whenever an user moves the cursor fast above many avatars many of the overlayPanels stay visible. For example when the user has the cursor over the position where user avatars are displayed and uses the scroll wheel of his mouse to scroll the usertable down or up.

我相信当 showEvent="mouseover" 被调度并显示覆盖面板时，覆盖面板开始从服务器动态加载信息 (dynamic="true")在服务器的响应到达后.这样，当覆盖面板变为可见时，无法检测光标是否已经离开 - 因此 hideEvent="mouseout" 永远不会被调度.

I believe that the overlaypanel starts to load the information dynamically (dynamic="true") from the server when showEvent="mouseover" is dispatched and displays the overlaypanel after the response from the server arrives. This way it is not possible to detect whether the cursor is already away when the overlaypanel becomes visible - so the hideEvent="mouseout" is never dispatched.

有没有办法让 primefaces 覆盖面板直接出现在鼠标悬停上，显示一个加载 gif 并在响应来自服务器时将内容更新到覆盖面板中.

Is there a way to make the primefaces overlaypanel appear directly on mousover, showing a loading gif and update the content into the overlaypanel when the response comes from the server.

这是一个好的方法吗，或者有没有人知道解决这个讨厌的问题的任何其他方法?

Is this a good appraoch or does anyone know any other way to solve this nasty problem?

谢谢皮特

推荐答案

由于我的第一个答案已经很长并且包含有效信息，我决定打开一个新答案来展示我的最终方法.

As my first answer is already very long and contains valid information, I decided to open a new answer presenting my final approach.

我现在使用 Primefaces 继承模式使代码更清晰.我还注意到替换/覆盖整个 bindEvents 函数不是必需的，因为我们可以删除旧的事件处理程序.最后，这段代码修复了遇到的最新问题:ajax 到达之前的隐藏事件.

Im now using Primefaces inheritance pattern making the code alot cleaner. Also I noticed that replacing/overwriting the whole bindEvents function isnt necessary, as we can remove the old event handlers. Finally this code fixs the latest issue experienced: A hide event before ajax arrival.

PrimeFaces.widget.OverlayPanel = PrimeFaces.widget.OverlayPanel
        .extend({

            bindEvents : function() {
                this._super();

                var showEvent = this.cfg.showEvent + '.ui-overlay', hideEvent = this.cfg.hideEvent
                        + '.ui-overlay';

                $(document).off(showEvent + ' ' + hideEvent, this.targetId).on(
                        showEvent, this.targetId, this, function(e) {
                            var _self = e.data;

                            clearTimeout(_self.timer);
                            _self.timer = setTimeout(function() {
                                _self.hidden = false;
                                _self.show();
                            }, 300);
                        }).on(hideEvent, this.targetId, this, function(e) {
                    var _self = e.data;

                    clearTimeout(_self.timer);
                    _self.hidden = true;
                    _self.hide();

                });
            },

            _show : function() {
                if (!this.cfg.dynamic || !this.hidden) {
                    this._super();
                }
            }

        });

很抱歉格式不正确:Eclipses 错误；)

Im sorry for the poor formatting: Eclipses fault ;)

这篇关于Primefaces overlayPanel 的延迟问题 - 加载到延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！