Открытое диалоговое окно jquery в IE7 очень медленно - PullRequest
Новая
       20

Открытое диалоговое окно jquery в IE7 очень медленно

5 голосов
/ 26 мая 2009

Имеют большое количество HTML, но, где я думал, узкое место будет неправильным: это когда я открываю диалог, а не когда я строю строку HTML (~ 35 мс) или когда добавив его в div контейнера диалога (~ 50 мс). При вызове диалогового окна («открыть») ниже В FF я постоянно получаю 1800+ мс, IE7 составляет около 17000 (!) Мс. Я могу жить с 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');
});

Есть идеи? Я пытаюсь создать страницу предварительного просмотра и предпочел бы не совершать повторную поездку на сервер, чтобы снова получить все эти данные, но сейчас это намного быстрее, чем на стороне клиента.

Ответы [ 2 ]

6 голосов
/ 27 мая 2009

Я столкнулся с похожей проблемой при использовании диалогового окна jQuery UI. Чтобы ускорить процесс, попробуйте сначала открыть диалоговое окно, а затем добавить данные. 

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

Это, казалось, помогло мне. Также проверьте, нет ли у вас битых тегов или неправильного HTML-кода в добавляемой строке.

1 голос
/ 05 января 2012

Хотя приведенный выше код html () заставляет IE быстрее выводить диалог, в моем случае это был запрос ajax, который я делал после создания диалога, что вызывало медлительность в IE. Это конкретное веб-приложение должно было отображать диалоговое окно ожидания после нажатия кнопки сохранения.

Использование 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();
...