blockui flashes loading изображение в конце интенсивной функции js

Question

Я использую blockui и jquery 1.4.2, чтобы показать загрузочное изображение, когда начинается особенно интенсивная функция js, и я использую $ .unblockui для выгрузки загружаемого изображения в конце функции. работает довольно гладко в ff, chrome, safari ..

Проблема, с которой я столкнулся в ie6 и ie7, заключается в том, что в начале функции js загрузочное изображение сразу не отображается ... но выглядит он манипулирует или оценивает всю функцию, а затем показывает себя и мгновенно мигает. Короче говоря, похоже, что изображение загрузки отображается в конце этой интенсивной функции.

Любое предложение о том, как бороться с тем или иным способом, чтобы показать загрузчик.

function myintensefunction() 
    { 
    $.blockui(); 

    // code execution which in ie6 and ie 7 takes3-4 seconds.. 

     $.unblockui(); 

    } 

Answer 1

Попробуйте изменить версию blockui использования

это Malsup

Answer 2

Я только что нашел приемлемое решение этой проблемы. Я занимаюсь разработкой Microsoft MVC 2 в Chrome, а затем я уверен, что мои веб-страницы работают правильно в IE 7. Я использую jQuery 1.4.3 и blockUI v2.31. По умолчанию blockUI очень гладко в Chrome, а короткий & изменен в IE.

Итак, вот суть того, что я делаю.

У меня есть функция, которая вызывает вызов jQuery $ .ajax, непосредственно перед вызовом блокирую пользовательский интерфейс, а затем, когда вызов завершается, я разблокирую пользовательский интерфейс. Иногда эта операция длится несколько секунд, а диалоговое окно с блочным интерфейсом отлично смотрится как в Chrome, так и в IE, поскольку анимированный GIF показывает прогресс. Но в других случаях операция выполняется очень быстро, и диалоговое окно блока UI выглядит прерывистым и резким в IE7 (все еще отлично смотрится в Chrome).

Решение заключалось в том, чтобы положить немного более длительную задержку в функции, скрывающей диалоговое окно интерфейса блока, скажем, 1,2 секунды вместо 200 миллисекунд. Так как большинство моих операций занимает несколько секунд, это едва заметно и делает пользовательский интерфейс гладким в обоих браузерах.

Например, эта функция вызывается в моем код клиента и обновляет элемент страницы:

function ajaxLoadElement(url, elementName, loadData, complete) { 
    // block the UI 
    ajaxWaitCursor(); 

    $.ajax({ 
     url: url, 
     data: loadData, 
     success: function(data, textStatus, jqXHR) { 
      // asynchronous call was successful: unblock the UI 
      ajaxNormalCursor(); 

     $('#' + elementName).html(data); 
      if (complete != null) { 
       complete(); 
      } 
     }, 
     error: function(jqXHR, textStatus) { 
      // asynchronous call encountered an error: unblock the UI and display the error 
      ajaxNormalCursor(); 
      displayAjaxLoadError(jqXHR); 
     } 
    }); 
} 

Вот мои вспомогательные функции для блокировки и разблокировки интерфейса:

/// 
/// Shows a jQuery busy popup with a 20 second timeout 
/// 

function ajaxWaitCursor() { 
    var imgPath = getImageResource("Content/Images/ajax-loading.gif"); 
    var img = '<img src="' + imgPath + '" style="margin-top: 5px;" />'; 

    $.blockUI(
     { 
      message: img, 
      fadeIn: 400, 
      fadeOut: 400, 
      timeout: 20000, 
      showOverlay: true, 
      textAlign: 'center', 
      centerY: true, 
      centerX: true, 
      css: { 
       border: '', 
       padding: '5px', 
       backgroundColor: '#000', 
       '-webkit-border-radius': '10px', 
       '-moz-border-radius': '10px', 
       'border-radius': '10px', 
       opacity: 0.5, 
       color: '#fff' 
      }, 
      overlayCSS: { opacity: 0.1 } 
     }); 
} 

/// 
/// Hides the jQuery busy popup; to make this smooth on IE, give it 
/// a reasonable amount of time to remain visible, in case the operation 
/// was really short. 
/// 
/// In this case, wait for 1.2 seconds before fading out the dialog 
/// 

function ajaxNormalCursor() { 
    setTimeout("$.unblockUI()", 1200); 
}