jQuery UI diálogo alrededor del iframe; ¿problemas de desempeño?

Question

Estoy haciendo un diálogo jQuery UI alrededor de un elemento iframe y el rendimiento de hacerlo se ve gravemente afectado. El problema aparece cuando mueves el cuadro de diálogo demasiado rápido, lo que hace que el mouse vaya sobre el elemento iframe, toda la página se cuelgue por un momento y cause una desaceleración notable. He leído sobre el iframe capturando eventos del mouse que está causando la desaceleración, pero parece que no puedo determinar el problema exacto. Traté de capturar mousemove y mouseover y prevenir el comportamiento predeterminado, sin suerte.

¡Se agradecerán todos los indicadores para volver a encarrilar el rendimiento! También tenga en cuenta que estoy usando Webkit y no me importa la compatibilidad con otros navegadores.

Answer 1

Acabo de toparme con estos problemas de rendimiento. Al arrastrar o cambiar el tamaño del diálogo, el mouse por lo general pasará por encima del iframe. Esos eventos son capturados por el iframe que resulta en un comportamiento lag, como usted mencionó.

jQuery draggable proporciona una opción "iframeFix" que coloca un div transparente sobre iframes mientras arrastra. El complemento de diálogo no proporciona esta corrección. Mirando el jquery-ui code para el iframefix, pude adaptarlo para resolver los problemas de rendimiento de mis diálogos. Añadiendo algo similar a su arrastre de diálogo y cambiar el tamaño de arranque/parada opciones debe hacer el truco:

$(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 
     } 
}); 

He modificado el código para el div transparente cambiará el tamaño de la ventana y se coloca con relación al recipiente de diálogo vs . la ventana. Eso podría necesitar más ajustes. Lo ideal es extender el complemento de diálogo para manejar estas opciones. Haré eso pronto.

This post en los foros jQuery me proporcionó el puntero a la corrección del complemento arrastrable.