在IE7中，打開jquery UI對話框令人費解

Question

有大量的HTML，但我認為瓶頸是不正確的：它是在我打開對話框時，而不是在我構建HTML字符串（~35ms）時，也不是在我將其附加到對話框容器div（~50ms）。 當在FF下面調用對話框（“打開”）時，我總是得到1800+ ms，IE7大約是17000（！）ms。 我可以忍受1800毫秒，但在IE7（我的用戶群的99％），這太長了。

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

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

Answer 1

我在使用jQuery UI Dialog時遇到了類似的問題。 要加快速度，請先嘗試打開對話框，然后附加數據。

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

這似乎對我有所幫助。 還要檢查要附加的字符串中是否有任何損壞的標記或格式錯誤的HTML。

Answer 2

雖然上面的html（）代碼確實迫使IE在我的情況下更快地渲染對話框，但結果是在創建對話框后我正在制作的ajax請求導致IE的緩慢。 單擊保存按鈕后，此特定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();