iframeのjQuery UIダイアログ。パフォーマンスの問題？

Question

私はiframe要素の周りにjQuery UIダイアログを作成していますが、その実行のパフォーマンスには深刻な影響があります。マウスをiframe要素の上に移動させるためにダイアログをあまりにも速く動かすと問題が発生し、ページ全体がしばらく停止し、著しい減速を引き起こします。私は減速の原因となっているマウスイベントをキャプチャしているiframeについて読んだが、正確な問題を特定できないようだ。私はmousemoveとmouseoverをキャプチャしようとし、デフォルトの動作を妨げました、運はありません。

パフォーマンスを改善するためのあらゆる指針が評価されます。 私はWebkitを使用しており、他のブラウザとの互換性については気にしないことに注意してください。

Answer 1

私はこれらのパフォーマンスの問題に直面しました。ダイアログをドラッグまたはサイズ変更すると、通常、マウスはiframeを移動します。これらのイベントは、あなたが言及したように、遅い動作をもたらすiframeによって捕捉されます。

jQueryのドラッグは、ドラッグ中のiframeの上に透明のdivを置く「iframeFix」オプションを提供します。ダイアログプラグインはこの修正を提供しません。 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は、ダイアログでサイズが変更されますので、コードを変更したし、それが対ダイアログコンテナに関連して配置されています。 窓。それはより多くの微調整を必要とするかもしれない。理想的には、ダイアログプラグインを拡張してこれらのオプションを処理するだけです。私はいつかすぐにそれをやるでしょう。 jQueryのフォーラムで

This postは私にドラッグ可能なプラグインの修正へのポインタを提供します。