功能运行时显示“请稍候”模态

时间:2010-07-14 19:28:15

标签: jquery jquery-ui jquery-ui-dialog

我正在尝试添加一个jQuery UI模式对话框,以显示函数何时启动,其中显示“请稍候”。然后在功能完成时将其关闭。我尝试了以下内容:

function flashFallback(){
  $('#dialog').dialog({
    modal:true,
    autoOpen:false
  });
  $("#dialog").dialog("open");

  /* Other code goes here... 

  */

  $('#dialog').dialog("destroy");
}

我知道函数成功运行但对话框从未关闭。我也试过“关闭”而不是“破坏”而没有运气。救命啊!

更新:这是完整的功能:

function flashFallback(){
    $('#dialog').dialog({
        modal:true,
        autoOpen:false
    });
    $("#dialog").dialog("open");

    var el = "";
    var vidFileName = "";
    var posterPath = "";
    var videoTag = "";
    var boxId = "";
    var so = "";
    var flashId = "";
    var flashVars = "";
    var params = "";
    var attributes = "";
    var anchorId = "";
    var dotPosition = "";

    $("[id^='vid-']").each(function(){
        el = "";
        vidFileName = "";
        posterPath = "";
        videoTag = "";
        flashId = "";
        flashVars = "";
        params = "";
        attributes = "";
        anchorId = "";

        el = $(this);

        boxId = this.id + "_flashBox";
        flashId = this.id + "_flashPlayer";
        anchorId = this.id + "_anchor";

        el.parent().parent().find("div:first").attr("id",boxId);

        el.parent().find("source").each(function(){
            if ($(this).attr("src").indexOf("m4v") != -1 || 
                $(this).attr("src").indexOf("mp4") != -1){
                vidFileName = $(this).attr("src").substring($(this).attr("src").lastIndexOf("/")+1);
            }
        });

        /*
            IE uses the Flash player, which overlays a 'Play' button
            on the poster image by default; so we use a poster image
            that doesn't have a play button. Otherwise we'd end up 
            with a play button on top of a play button.
        */

        dotPosition = el.parent().find("img").attr("src").lastIndexOf(".");
        posterPath = el.parent().find("img").attr("src").substring(0,dotPosition) + "-ie" + el.parent().find("img").attr("src").substring(dotPosition);

        el = $("[id="+boxId+"]");
        el.empty();
        el.append("<a id='" + anchorId +"'></a>");

        flashvars =
        {
            file:                 vidFileName,
            autostart:            'false',
            image:            posterPath
        };

        params =
        {
            allowfullscreen:      'true', 
            allowscriptaccess:    'always',
            wmode:            'opaque',

        };

        attributes =
        {
            id:                   flashId, 
            name:                 flashId
        };

        swfobject.embedSWF('global/vid/player-licensed.swf', anchorId, '372', '209', '9.0.124', 'global/js/swfobject/expressInstall.swf', flashvars, params, attributes);

    });
     $('#dialog').dialog("destroy");

}

2 个答案:

答案 0 :(得分:4)

Javascript是单线程的,因此该函数可以串行运行。它打开对话框(但尚未刷新页面),然后运行代码,然后在重新绘制网页之前关闭对话框。

您需要做的是打开对话框并异步运行该功能,完成后您想关闭对话框。

答案 1 :(得分:1)

我不确定你的功能应该做什么,或者为什么需要足够长的时间才需要'Please Wait'模式,所以我会假设它的某种请求(AJAX,图像加载等) )。

如果是这种情况,则destroy需要位于函数回调的一部分内。