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就会出现，并向用户显示更多信息(延迟加载)，而当用户将光标移开时，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" ...>

这非常好-只要用户慢手"即可.每当用户将光标快速移动到许多化身上方时，许多overlayPanel便保持可见. 例如，当用户将光标放在显示用户化身的位置上并使用其鼠标的滚轮向下或向上滚动用户表时.

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.

是否有一种方法可以使素面覆盖面板直接出现在Mousover上，显示加载的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到达之前的hide事件.

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屋！