El diálogo de IU de jquery abierto es extremadamente lento en IE7

Question

Tengo una gran cantidad de HTML, pero donde pensé que el cuello de botella sería incorrecto: es cuando abro el diálogo, no cuando estoy construyendo la cadena de HTML (~ 35ms), ni cuando lo estoy agregando al contenedor de diálogo div (~ 50ms). Cuando llamo a un cuadro de diálogo ("abrir") a continuación En FF, constantemente obtengo 1800+ ms, IE7 es alrededor de 17000 (!) Ms. Puedo vivir con 1800ms, pero en IE7 (99% de mi base de usuarios), eso es demasiado largo.

// prep dialog 
$("#print-box").dialog({ 
    bgiframe: false, 
    width:900, 
    height: 1000, 
    modal: true, 
    autoOpen: false, 
    draggable: false 
    }); 

// display selected items in print preview modal 
$("#print-preview").click(function() { 

    $('#print-box').empty(); 

    var tmp = ['<div class="print-container">']; 
    var rows = $('[name="print-this-listing"]:checked').parents("div.listing").clone(); 

    for (var i=0; i < rows.length; i++) { 
     tmp.push($(rows[i]).html()); 
    } 

    tmp.push('</div>'); 

    $('#print-box').html(tmp.join('')); 
    $('#print-box').dialog('open'); 
}); 

¿Alguna idea? Intento crear una página de vista previa de impresión y preferiría no realizar otro viaje de ida y vuelta al servidor para recuperar todos esos datos nuevamente, pero ahora es mucho más rápido que el lado del cliente.

Answer 1

Me encontré con un problema similar al usar el diálogo de la interfaz de usuario de jQuery. Para acelerar las cosas intente abrir el diálogo primero y luego anexar los datos.

$('#print-box').dialog('open'); 
    $('#print-box').html(tmp.join('')); 

Esto pareció ayudarme. También verifique si tiene alguna etiqueta rota o HTML mal formado en la cadena que está agregando.

Answer 2

Aunque el código html() anterior obliga a IE a renderizar el cuadro de diálogo más rápido, en mi caso resultó ser la solicitud ajax que hice después de que se creara el cuadro de diálogo que causaba la lentitud en IE. Esta aplicación web particular necesitaba mostrar un cuadro de diálogo de espera luego de hacer clic en un botón de guardar.

El uso de setTimeout permite que la solicitud ajax ocurra fuera de la representación del diálogo. Aquí está el código básico que utilicé:

function request(requestURL, sendData, asyncRequest) { 
     return jQuery.ajax(
     { 
      url: requestURL, 
      type: 'POST', 
      datatype: 'json', 
      data: sendData, 
      contentType: 'application/json; charset=utf-8', 
      async: asyncRequest, 
      success: function (data, result) { 
       if (!result) 
        alert('Failure to retrieve the related lookup data: ' + requestURL); 
      } 
     }).responseText; 
    } 

    function modifyProperties(postData) { 
     var d; 

     // create wait dialog 
     jQuery("#wait").dialog({ 
      maxWidth: 125, 
      maxHeight: 75, 
      minWidth: 125, 
      minHeight: 75, 
      modal: true, 
      resizable: false 
     }); 

     // ie fix to ensure dialog is rendered prior to ajax request 
     setTimeout(function() { 
      // make an ajax request after 500ms 
      d = request('/mywebservice', postData, false); 
      jQuery("#wait").dialog("close"); 
      var responseObject = JSON.parse(d); 
     }, 500); 

     return true; 
    } 

    modifyProperties();