Perdite di memoria della finestra di dialogo jQuery-UI

Question

Sto lavorando con IE7 e alcune finestre di dialogo jQuery e sto correndo in una perdita di 6 meg per finestra di dialogo aperta. Suppongo che abbia a che fare con le chiusure, ma finora tutto ciò che ho fatto per rimuoverle non ha aiutato. A questo punto penso di aver preso cura di tutte le chiusure tranne che per una funzione di callback che ho passato, ma perdura ancora 6 mega anche dopo che la finestra di dialogo è stata chiusa e rimossa. Il codice sorgente di riferimento è:

function DialogDestroyAndRemove(event) { 
    $(event.target).dialog("destroy").remove(); 
} 

function CallbackAndCloseDialog(event) { 
    if (event.data.callback != undefined) { 
     event.data.callback(event.data.callbackResponse); 
    } 
    $("#" + event.data.dialogId).unbind('dialogbeforeclose').dialog('close'); 
} 

// alert dialog modal with ok button 
function AlertDialog(dialogTitle, dialogText, callbackFunction) { 
    // dynamically generate and add a div so we can create the pop-up 
    $('body').append("<div id=\"alertDialog\" style=\"display:none;\" title=\"" + dialogTitle + "\">" + dialogText + "</div>"); 

    // define/configure the modal pop-up 
    $("#alertDialog").dialog({ 
     draggable: false, 
     resizable: false, 
     modal: true, 
     autoOpen: true, 
     open: function() { 
      $("#alertDialog").parents('.ui-dialog-buttonpane button:eq(0)') 
      .focus() //focus so the button is highlighted by default 
      .bind('click', { 
       callback: callbackFunction, 
       callbackResponse: 'OK', 
       dialogId: 'alertDialog' 
      }, CallbackAndCloseDialog); 
     }, 
     overlay: { backgroundColor: '#000', opacity: 0.5 }, 
     buttons: { 'OK': function() { } } 
    }).bind('dialogbeforeclose', function(event, ui) { 
     // Close (X) button was clicked; NOT the OK button 
     if (callbackFunction != undefined) { 
      callbackFunction('cancel'); 
     } 
     callbackFunction = null; 
    }).bind('dialogclose', DialogDestroyAndRemove); 
} 

Una cosa che ho fatto in precedenza che non sono sicuro se è necessario era invece di definire la richiamata per il pulsante OK quando è definito (e quindi avere una chiusura dal momento che è riferimento alla callback) per definirlo usando .bind una volta aperta la finestra di dialogo. Speravo che riuscire a passare il callback come parte dei dati all'evento click potesse aiutare a rimuovere la chiusura.

Qualche idea su cos'altro posso cambiare per eliminare questa perdita?

Answer 1

In realtà è stato causato da come la struttura dell'interfaccia utente di jQuery si occupa di ingrigire lo sfondo durante la visualizzazione di una modale. Se rimuovo modal = true e gli attributi di overlay, la perdita di memoria scende a ~ 100k.

Per aggirare questo ho dovuto fare la finestra di dialogo senza l'opzione modale, e quindi aggiungere un div io stesso alla pagina (posizione fissa in alto, a sinistra, in basso, a destra tutto 0 con un pixel grigio alternato poi sfondo pixel trasparente) e mostrandoli e nascondendoli con uno zindex proprio sotto la finestra di dialogo.

Anche se non è l'ideale (l'overlay modale di default era bello e dall'aspetto liscio) è meglio che fuoriuscire quella quantità di memoria per finestra di dialogo che faccio apparire.

Answer 2

Spero che questo aiuti, ho creato un'estensione per questo problema in cui utilizzo il plugin expate di jQuery tools (flowplayer) quando modal = true per la finestra di dialogo dell'interfaccia utente jQuery.

vorrei includere il folhttp: //jsfiddle.net/yZ56q/lowing codice in un file .js separati e assicurarsi di includere gli strumenti jQuery espongono plugin di prima, da questo sito ... http://flowplayer.org/tools/download.html.

(function($) { 
    var _init = $.ui.dialog.prototype._init; 
    $.ui.dialog.prototype._init = function() { 
     var self = this; 
     _init.apply(this, arguments); 

     // Remove the default modal behavior and exhibit the new one 
     if (self.options.modal) { 
      self.options.modal = false; 
      self.options.isModal = true; 
     } 

     this.uiDialog.bind('dialogopen', function(event, ui) { 
      if (self.options.isModal) { 
       if ($(this).expose == null) 
        window.alert("Dialog box depends on the expose plugin to be modal. Please include the jquery tools Javascript include."); 
       else { 
        $(this).expose({ opacity: 0.3 
          , color: '#CCCCCC' 
          , loadSpeed: 0 
          , closeSpeed: 0 
          , closeOnClick: false 
          , closeOnEsc: false 
          , api: true 
        }).load(); 
       } 
      } 
     }); 

     this.uiDialog.bind('dialogfocus', function(event, ui) { 
      if (self.options.isModal) { 
       $(this).css('z-index', '9999'); 
      } 
     }); 

     this.uiDialog.bind('dialogclose', function(event, ui) { 
      if (self.options.isModal) { 
       if ($(this).expose != null) { 
        $(this).expose({ api: true }).close(); 
       } 
      } 
     }); 
    }; 

     $.ui.dialog.defaults.isModal = false; 
})(jQuery);