blockui мигает при загрузке изображения в конце интенсивной функции js - PullRequest
Новая
       6

blockui мигает при загрузке изображения в конце интенсивной функции js

0 голосов
/ 07 ноября 2010

Я использую 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();

  }

Ответы [ 2 ]

0 голосов
/ 11 марта 2011

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

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

У меня есть функция, которая делает вызов jQuery $ .ajax, незадолго до вызова я блокирую UI, затем, когда вызов завершается, я разблокирую UI. Иногда эта операция занимает несколько секунд, и диалоговое окно блочного интерфейса отлично смотрится как в Chrome, так и в IE, поскольку анимированный GIF показывает прогресс. Но в других случаях операция выполняется очень быстро, и диалоговое окно блокировки пользовательского интерфейса в 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);
}
0 голосов
/ 07 ноября 2010

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

используйте это Malsup

...