0

我正在使用 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();

  }
4

2 回答 2

0

我刚刚找到了解决这个问题的可行方法。我在 Chrome 中进行 Microsoft MVC 2 开发，然后验证我的网页在 IE 7 中正常工作。我使用的是 jQuery 1.4.3 和 blockUI v2.31。默认情况下，blockUI 在 Chrome 中非常流畅，而在 IE 中又短又断断续续。

所以，这是我所做的要点。

我有一个进行 jQuery $.ajax 调用的函数，就在调用之前我阻塞了 UI，然后当调用完成时我解除阻塞 UI。有时此操作会持续几秒钟，并且块 UI 对话框在 Chrome 和 IE 上看起来都很棒，因为动画 GIF 显示了进度。但有时操作执行得非常快，并且块 UI 对话框在 IE7 中显得断断续续和突然（在 Chrome 中仍然看起来很棒）。

解决方案是在隐藏块 UI 对话框的函数中设置稍长的延迟，例如 1.2 秒而不是 200 毫秒。由于无论如何我的大部分操作都需要几秒钟，这几乎不会引起注意，并且使两种浏览器的 UI 都感觉流畅。

例如，在我的客户端代码中调用此函数并更新页面元素：

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);
}
于 2011-03-10T22:25:36.283 回答
0

尝试更改blockui的版本

使用这个Malsup

于 2010-11-07T18:20:58.257 回答