Mở hộp thoại giao diện người dùng jquery chậm phát triển trong IE7

Question

Có một số lượng lớn HTML, nhưng tôi nghĩ rằng nút cổ chai sẽ không chính xác: đó là khi tôi mở hộp thoại, chứ không phải khi tôi tạo chuỗi HTML (~ 35ms), cũng không phải khi tôi thêm nó vào div vùng chứa hộp thoại (~ 50ms). Khi gọi hộp thoại ("mở") bên dưới Trong FF, tôi liên tục nhận được 1800+ ms, IE7 là khoảng 17000 (!) Ms. Tôi có thể sống với 1800ms, nhưng trong IE7 (99% cơ sở người dùng của tôi), đó là cách quá dài.

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

Bất kỳ ý tưởng nào? Tôi đang cố gắng xây dựng trang xem trước bản in và không muốn thực hiện một chuyến đi khứ hồi khác tới máy chủ để tìm nạp lại tất cả dữ liệu đó, nhưng nhanh hơn rất nhiều so với phía máy khách ngay bây giờ.

Answer 1

Tôi gặp phải sự cố tương tự khi sử dụng Hộp thoại giao diện người dùng jQuery. Để tăng tốc mọi thứ, hãy thử mở hộp thoại trước và sau đó nối thêm dữ liệu.

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

Điều này dường như giúp ích cho tôi. Ngoài ra, hãy kiểm tra xem bạn có bất kỳ thẻ bị hỏng hoặc HTML không đúng định dạng nào trong chuỗi mà bạn đang thêm vào hay không.

Answer 2

Mặc dù mã html() ở trên không buộc IE hiển thị hộp thoại nhanh hơn trong trường hợp của tôi, nó trở thành yêu cầu ajax mà tôi đã tạo sau khi hộp thoại được tạo ra khiến tốc độ chậm trong IE. Ứng dụng web cụ thể này cần để hiển thị hộp thoại chờ sau khi nhấp vào nút lưu.

Sử dụng setTimeout cho phép yêu cầu ajax xảy ra bên ngoài kết xuất hộp thoại. Đây là mã cơ bản tôi đã sử dụng:

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