创建一个加载Div

发布于 2024-11-05 08:29:03 字数 314 浏览 3 评论 0原文

我正在尝试创建一个愚蠢的加载 div。我只是想让它在每次单击按钮时显示。我有一个名为 ajaz-loader.gif 的 gif，位于 img/

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

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

原文

I am trying to create a stupid loading div. I just want it to show everytime a button is clicked. I have a gif named ajaz-loader.gif located in img/

I have this and it doesn't work... I just found it on the internet. Any ideas?

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖兔^ω^ 2024-11-12 08:29:03

确保将您的代码包装在 a 中

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

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

看起来像这样:)

Web服务运行时显示加载

Make sure to wrap your code inside a

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

Then if it still doesn't work, double check if your #loadingDiv

That looks like this :)

Display loading while webservice is running

回复收藏 0 原文

别想她 2024-11-12 08:29:03

    $(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，然后在成功与否后隐藏它。

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

This will show your loading div before the Ajax call then hide it after weather its successful or not.

回复收藏 0 原文

远昼 2024-11-12 08:29:03

您可能想发布更多代码。根据您上面的情况，尚不清楚问题可能是什么。也许事情很简单，例如您没有正确加载 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 修改它可能并不困难...

You might want to post more code. With what you have above, it's unclear what the problem might be. Perhaps it's something simple, such as you're not loading jQuery properly or the ID speicified for the element is incorrect. Perhaps it's somewhat more involved, such as the event that triggers ajaxStart never fires.

With the caveat that there are some suboptimal practices in the code below (e.g., putting style information directly in the HTML) and that I'm not handling ajax or hiding after success, this should might you started:

<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!"/>

That might get you going in the right direction. I suspect it's not enough to do everything you want to do, but if all you really want is "to just...show everytime a button is clicked", well, it does that much, and modifying it for jQuery is likely not difficult...

回复收藏 0 原文

等风也等你 2024-11-12 08:29:03

我制作了自己的加载伪类，并且在大型 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();

I made my own loading pseudo-class and works fine in big web (jsp) application.

My Code is something like this:

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

When I run an ajax call CMSLoading.start() and when ajax finish or die call CMSLoading.stop();

回复收藏 0 原文

~没有更多了~