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

我刚刚找到了解决这个问题的可行方法。我在Chrome中进行Microsoft MVC 2开发，然后我在IE 7中验证我的网页是否正常工作。我正在使用jQuery 1.4.3和blockUI v2.31。默认情况下，blockUI在Chrome中非常流畅，并且简短且简洁。在IE浏览器中不稳定。

所以，这就是我所做的一切。

我有一个函数可以进行jQuery $ .ajax调用，就在调用我阻止UI之前，然后当调用完成时我取消阻止UI。有时候这个操作只需要几秒钟，并且阻止UI对话框在Chrome和IE上看起来都很棒，因为动画GIF会显示进度。但其他时候操作执行得非常快，并且在IE7中块UI对话框显得不稳定和突然（在Chrome中看起来仍然很棒）。

解决方案是在隐藏块UI对话框的函数中放置稍长的延迟，比如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);
        }
    });
}

以下是阻止和解锁UI的帮助函数：

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

blockui在激烈的js函数结束时闪烁加载图像

2 个答案: