Question

我正在尝试创建一个愚蠢的加载div。我只想在每次点击按钮时显示它。我有一个位于img /

的名为ajaz-loader.gif的gif

我有这个并且它不起作用...我刚刚在互联网上找到它。有什么想法吗？

    <script>
    $('#loadingDiv').ajaxStart(function() {
      $(this).show();
    }).ajaxComplete(function() {
    $(this).hide();
    });
     </script>

Answer 1

确保将代码包装在

中

$(function() {
  // YOUR CODE HERE
});

然后如果它仍然不起作用，请仔细检查你的#loadingDiv

看起来像这样：）

Display loading while webservice is running

Answer 2

    $(document).ready(function () {
        $("#btnid").click(function () {
            $("#loadingDiv").show();
            $.ajax({
                url: "url"
                cache: false,
                type: "GET",
                dataType: "text",
                success: function (data) {
                    //Success code here
                }
            });
            $("#loadingDiv").hide();
        });
    });

这将在Ajax调用之前显示你的加载div，然后在天气成功之后隐藏它。

Answer 3

您可能想发布更多代码。有了上面的内容，目前还不清楚问题可能是什么。也许它很简单，例如你没有正确加载jQuery或者元素的ID是不正确的。也许它涉及更多，例如触发ajaxStart的事件永远不会触发。

需要注意的是，下面的代码中存在一些次优的做法（例如，将样式信息直接放在HTML中），并且我没有处理ajax或成功后隐藏，这可能是你应该开始的：

<div id="loadingDiv" style="display:none">
Congratulations! You clicked the button and can see the loading div now!
</div>

<input type="button" onclick="document.getElementById('loadingDiv').style.display='block';" value="Click me to see the div!"/>

这可能会让你朝着正确的方向前进。我怀疑做你想做的一切是不够的，但是如果你真正想要的只是“只是......每次点击一个按钮就显示出来”，嗯，它做的那么多，为jQuery修改它可能并不困难...

Answer 4

我创建了自己的加载伪类，并且在大型Web（jsp）应用程序中运行良好。

我的代码是这样的：

var CMSLoading =
{
        loading_div: null,
        queue: 0,
        start: function(never_stop)
        {
               //Create div with getLoadingDiv (wrong name) or show if exist
               // and increment queue
        },
        stop: function(turn_off)
        {
                //Check queue and hide or destroy div
        },
        getLoadingDiv: function()
        {
                // Create DIV and store in local variable loading_div
        }
}

当我运行ajax调用CMSLoading.start()并且当ajax完成或死亡时调用CMSLoading.stop();

创建一个加载Div

4 个答案: