[英]jQuery UI dialog around iframe; performance issues?
我正在围绕iframe元素创建一个jQuery UI对话框,这样做的性能受到严重影响。 当您将对话框移动太快而导致鼠标移过iframe元素时,会出现问题,整个页面将暂停一段时间并导致明显的减速。 我已经读过iframe捕获鼠标事件导致速度减慢但我似乎无法确定确切的问题。 我试图捕获mousemove和mouseover并防止默认行为,没有运气。
任何能使表演恢复正常的指针都将受到赞赏! 另请注意,我使用的是Webkit,并不关心与其他浏览器的兼容性。
我自己也遇到了这些性能问题。 拖动或调整对话框大小时,鼠标通常会遍历iframe。 正如您所提到的那样,iframe会捕获这些事件,导致延迟行为。
jQuery draggable提供了一个“ iframeFix ”选项,可以在拖动时在iframe上放置透明div。 对话框插件不提供此修复程序。 查看iframefix的jquery-ui代码 ,我能够调整它以解决我的对话框的性能问题。 添加类似于对话框拖动和调整开始/停止选项的内容应该可以解决问题:
$(selector).dialog({
dragStart: function (event, ui) {
$('iframe', this).each(function() {
$('<div class="ui-draggable-iframeFix" style="background: #FFF;"></div>')
.css({
width: '100%', height: '100%',
position: 'absolute', opacity: '1', zIndex: 1000, overflowX: 'hidden'
})
.css($(this).position())
.appendTo($(this).offsetParent());
});
},
dragStop: function (event, ui) {
$("div.ui-draggable-iframeFix").each(function() {
this.parentNode.removeChild(this); }); //Remove frame helpers
}
});
我修改了代码,因此透明div将使用对话框调整大小,并且相对于对话框容器与窗口相对应。 这可能需要更多调整。 理想情况下,您只需扩展对话框插件即可处理这些选项。 我很快就会这样做。
jQuery论坛上的这篇文章为我提供了可拖动插件修复的指针。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.