blockui flashes loading image at the end of an intense js function

I am using blockui and jquery 1.4.2 to show a loading image when a particularly intense js function starts and am using $.unblockui to unload the loading image at the end of the function. works pretty smooth in ff, chrome, safari..

The issue I am facing in ie6 and ie7 is that, on the start of the js function, the loading image does not show itself right away... but looks like it kinds of manipulates or evaluates the whole function and then shows itself and flashes away in a second. in short it looks like the loading image shows at the end of this intense function.

Any suggestion on how to deal with this or another way to show the loading spinner.

  function myintensefunction()
 开发者_如何学JAVA {
   $.blockui();

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

      $.unblockui();

  }

Try to change the version of blockui

use this Malsup

I just found a workable solution to this problem. I am doing Microsoft MVC 2 development in Chrome, then I verify my web pages work properly in IE 7. I'm using jQuery 1.4.3 and blockUI v2.31. By default, blockUI is very smooth in Chrome, and short & choppy in IE.

So, here is the gist of what I do.

I have a function that makes a jQuery $.ajax call, just prior to the call I block the UI, then when the call completes I unblock the UI. Sometimes this operation is a few seconds long and the block UI dialog looks great on both Chrome and IE as the animated GIF shows progress. But other times the operation executes very quickly and the block UI dialog appears choppy and abrupt in IE7 (still looks great in Chrome).

The solution was to put a slightly longer delay in the function that hides the block UI dialog, say 1.2 seconds instead of 200 milliseconds. Since most of my operations take a few seconds anyway, this is barely noticeable and makes the UI feel smooth in both browsers.

For example, this function is called in my client code and updates a page element:

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

Here are my helper functions for blocking and unblocking the 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);
}