Question

我想知道在我的对话框弹出之前实现加载图像应该怎么做或应该做些什么？任何gif都可以。我应该在我的函数中添加什么函数或代码行？

------------我的jquery代码：------------

 $(".red_img").click(function() {

                });

                $("#red_form").dialog({

                        modal:true,
                        buttons: {
                            "Done": function() {


                            },
                            Cancel: function() {
                                $(this).dialog("close");
                            }
                        }
                });
                $("#red_form").show(500);
            });

Answer 1

您可以在点击事件开始时显示加载图片，然后在显示对话框之前隐藏图片：

// Initially, your loading image must be hidden
$("#your_loading_image").hide();

$(".red_img").click(function() {
    var red_type = $(this).attr("title").trim();

    // Display your loading image here -----------------------------
    $("#your_loading_image").show();

    $.ajax({
        url: "get_attributes.php",
        type: "post",
        datatype: "json",
        data: {wtype: red_type},
        success: function(data) {
            var toAppend = '';
            if(typeof data === "object"){
                toAppend += "<tbody>";
                toAppend += "<tr></td><td class=datalabel>Type:</td><td>"+data['type']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Health:</td><td>"+data['health']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Attack:</td><td>"+data['attack']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Defense:</td><td>"+data['defense']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Speed:</td><td>"+data['speed']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Evade:</td><td>"+data['evade']+"</td></tr>";
                toAppend += "<tr><td class=datalabel>Special:</td><td>"+data['special']+"</td></tr>";
                toAppend += "</tbody>";
                $("tbody").remove();
                $("#red_form table").append(toAppend);
            }
        }
    });

    $("#red_form #name").val($(this).attr("alt").trim());

    // Hide your loading image here --------------------------------
    $("#your_loading_image").hide();

    $("#red_form").dialog({
        width:300,
        resizable:false,
        modal:true,
        buttons: {
            "Done": function() {

                if($("#red_form #name").val().trim()==''){
                    alert("Text field cannot be empty.");
                    $("#red_form #name").focus();
                }
                else if($("#red_form #name").val().trim()===$("#blue_name").val().trim()){
                    alert("Name cannot be the same by other player.");
                    $("#red_form #name").focus();
                }
                else {
                    $("#red_name").val($("#red_form #name").val().trim());
                    $("#red_type").val(red_type);
                    $("#red_form").hide(400);
                    $(this).dialog("close");
                }
            },
            Cancel: function() {
                $(this).dialog("close");
            }
        }
    });
    $("#red_form").show(500);
});

其中#your_loading_image是您的加载图片，例如：

<img id="your_loading_image" src="your_loading_image_path.gif"/>

Answer 2

我希望您在弹出对话框之前寻找进度指示器的解决方案，以显示加载弹出窗口的进度，如果是，那么这里是如何实现此进度指示器以及模态。

第1步。

我已经采用了一个简单的面板，在其中插入了一个图像，并且“正在加载请稍候...”是我试图显示的文本。我已经将面板的位置设置到我想要的位置屏幕上

<asp:Panel ID="ProgressIndicatorPanel" runat="server" Style="display: none" CssClass="modalPopup">
        <div id="ProgressDiv" class="progressStyle">
            <ul class="ProgressStyleTable" style="list-style:none;height:60px">
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em">
                    <asp:Image ID="ProgressImage" runat="server" SkinID="ProgressImage" />
                </li>
                <li style="position:static;float:left;margin-top:0.5em;margin-left:0.5em;margin-right:0.5em">
                    <span id="ProgressTextTableCell"> Loading, please wait... </span>
                </li>
            </ul>
        </div>
    </asp:Panel>

第2步 由于我想在进度指示器显示期间禁用其余的屏幕功能，我使用了模式对话框，如下所示。

<asp:ModalPopupExtender ID="Progress_ModalPopupExtender" runat="server" ClientIDMode="Static" BehaviorID="ProgressModalPopupBehaviour"
        PopupControlID="ProgressIndicatorPanel" TargetControlID="DummyDialogButton" BackgroundCssClass="ModalPopupBG" 
        RepositionMode="RepositionOnWindowResizeAndScroll" Drag="false" DropShadow="true">
    </asp:ModalPopupExtender>

第3步

现在你需要通过包含这个来编写Javascript函数 $（ “＃ProgressImage”）显示（）;

如何为这行代码实现简单的加载映像

2 个答案: