圍繞iframe的jQuery UI對話框;性能問題？

我圍繞iframe元素製作了一個jQuery UI對話框，並且這樣做的性能受到嚴重影響。當您將對話框移動得太快而導致您的鼠標移過iframe元素時，會出現此問題，整個頁面會暫時掛起並導致顯着減速。我已閱讀了有關iframe捕獲鼠標事件，導致減速，但我似乎無法確定確切的問題。我試圖捕獲mousemove和mouseover，並防止默認行爲，沒有運氣。圍繞iframe的jQuery UI對話框;性能問題？

任何指針讓性能回到正軌，將不勝感激！另請注意，我使用的是Webkit，並不在乎與其他瀏覽器的兼容性。

來源

2011-08-22 Roel van Uden

我剛剛遇到這些性能問題。當拖動或調整對話框的大小時，鼠標通常會通過iframe。正如你所提到的，這些事件被iframe捕獲，導致了laggy行爲。

jQuery draggable提供了一個「iframeFix」選項，該選項在拖動時放置透明的div覆蓋iframe。對話框插件不提供此修復程序。查看iframefix的jquery-ui code，我可以調整它來解決我的對話框的性能問題。添加類似你的對話框拖東西，調整開始/停止選項應該做的伎倆：

$(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將對話框調整，它是相對於對話框容器VS定位。窗戶。這可能需要更多的調整。理想情況下，您只需擴展對話框插件即可處理這些選項。我很快就會這樣做。

This post在jQuery論壇上爲我提供了指向可拖動插件修補程序的指針。

來源

2011-11-11 01:26:10 mcanfield

我不得不使用resizeStart和resizeStop，但現在它工作：我可以順利地調整我的模態對話框。謝謝你，你的解決方案是優雅的，完美的作品。 – Germstorm

偉大的幫助和非常好的解決方案麥克菲爾德。由於iframe，我確實看到了性能和緊張問題。 +1 我的情況我第一次嘗試你的解決方案，但你提供的鏈接也幫助了我，問題已經解決了一個簡單的 - iframeFix：true –

圍繞iframe的jQuery UI對話框;性能問題？

回答

相關問題