javascript - 增量加载网页 : Where can I put: $ ("#LoadingImage"). Hide();

Question

我对 JavaScript 不太有经验。请看下面的代码:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">

    function GetSQLTable() {
        //alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
        var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
        var res = str.split(",");
        for (var i = 0; i < res.length; i++) {
            $("#LoadingImage").show();
            var div = document.createElement('div');
            div.id = "div" + i
            document.body.appendChild(div);

            //alert(res[i]);
            $.ajax({
                type: "POST",
                url: "Default3.aspx/GetSQLTable",
                data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess(i,res.length),
                failure: function (response) {
                    //alert(response.d);
                    alert('there was an error loading the webpage')
                }
            });
        }
        function OnSuccess(i,totalrows) {
            return function (response) {
                if (response.d != "") {
                    document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
                }
            }
        }
    }
    window.onload = GetSQLTable
</script> 

代码逐步构建一个网页，即在准备就绪时获取 x 个 HTML 表格并将其显示到网页上。这有效。

问题是我不知道如何在网页完成后删除 LoadingImage，即 $("#LoadingImage").hide();。 OnSuccess 被调用 x 次，具体取决于返回的表数量，因此我无法将其放在那里。

Answer 1

一种方法是计算成功调用 onSuccess() 的次数，并在调用完成后隐藏加载图像:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script type = "text/javascript">

    function GetSQLTable() {
        //alert($("#<%=fieldGroupReferences.ClientID%>")[0].value)
        var str = $("#<%=fieldGroupReferences.ClientID%>")[0].value
        var res = str.split(",");
        var numSucceeded = 0;
        for (var i = 0; i < res.length; i++) {
            $("#LoadingImage").show();
            var div = document.createElement('div');
            div.id = "div" + i
            document.body.appendChild(div);

            //alert(res[i]);
            $.ajax({
                type: "POST",
                url: "Default3.aspx/GetSQLTable",
                data: '{username: "' + $("#<%=fieldUserName.ClientID%>")[0].value + '", terminalname: "' + $("#<%=fieldTerminalName.ClientID%>")[0].value + '", terminalip: "' + $("#<%=fieldTerminalIP.ClientID%>")[0].value + '", mappingid: "' + res[i] + '", usergroup: "' + $("#<%=fieldUserGroup.ClientID%>")[0].value + '"}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: OnSuccess(i,res.length),
                failure: function (response) {
                    //alert(response.d);
                    alert('there was an error loading the webpage')
                }
            });
        }
        function OnSuccess(i,totalrows) {
            return function (response) {
                if (response.d != "") {
                    document.getElementById('div' + i).innerHTML = document.getElementById('div' + i).innerHTML + '<br>' + '<br>' + response.d;
                    numSucceeded++;
                    if (numSucceeded === totalrows) {
                      $("#LoadingImage").hide();
                    }
                }
            }
        }
    }
    window.onload = GetSQLTable
</script>