5

有大量的HTML,但我認爲瓶頸將是不正確的:這是當我打開對話框,而不是當我構建字符串HTML(〜35ms),也不會將它附加到對話框容器div(〜50ms)。當在FF下面調用對話框(「打開」)時,我始終獲得1800+ ms,IE7約爲17000(!)ms。我可以活到1800毫秒,但在IE7(99%的用戶羣)中,這太長了。jQuery的UI對話框打開在IE7中心態麻木慢

// 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'); 
}); 

任何想法?我正在嘗試構建一個打印預覽頁面,而不是再往返服務器再次獲取所有數據,但它現在比客戶端快得多。

回答

6

我遇到了類似的問題,在使用jQuery UI對話框。爲了加快速度,首先打開對話框,然後附加數據。

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

這似乎對我有幫助。此外,請檢查您正在追加的字符串中是否有任何已損壞的標籤或格式錯誤的HTML。

+0

謝謝。我最終使用iframe作爲「預覽窗口」並隱藏DOM中的元素,但返回後,這確實明顯更快 - 儘管如此,我仍然無法接受我的大數據需求。 – gravyface 2009-06-25 12:34:14

+0

我在IE6和IE8中遇到了同樣的問題。我的解決方法是進行ajax調用來獲取我的對話框的內容,並在打開它之後將其設置爲對話框的內容,如本答案中的建議。 – 2011-03-29 14:49:20

1

雖然上面的html()代碼確實強制IE在我的情況下更快地渲染對話框,但事實證明,這是我在創建對話框後導致IE緩慢的ajax請求。點擊保存按鈕後,此特定Web應用程序需要顯示等待對話框。

使用setTimeout允許ajax請求發生在對話框渲染之外。以下是我使用的基本代碼:

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