在 jquery ajax 工作时添加动画图像

发布于 2024-11-16 08:27:56 字数 339 浏览 0 评论 0原文

我正在使用 Jquery Ajax，我的代码如下所示，

 $.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
);

我需要添加一个动画 gif，该动画将在 ajax 工作时出现，然后在 ajax 完成时消失。

我怎样才能做到这一点？

原文

I am using Jquery Ajax, my code looks like this

 $.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
);

I need to add a animated gif that will appear while the ajax is working and then disappear when the ajax finishes.

How can i do that?

分享到QQ

分享到微博

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

发布评论

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

回首观望 2024-11-23 08:27:56

我有不同的逻辑和解决方案。

设置一个要显示 gif 图像的 div，例如

。

接下来，在 css 中将其设置为背景图像，并且不要设置图像链接；

background: no-repeat center;

当ajax执行时，给它一个背景图片loader.gif并在ajax任务完成时将其删除，例如；

 $.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' });
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
        $("#loader").css({ 'background-image':'url()' });
    },
    'html'
);

我自己没有测试过..希望这有帮助..

I have a different logic and solution.

Set a div where you want the gif image to appear like <div id="loader">.

Next, Set it a background image in css and don't set the image link like;

background: no-repeat center;

and when ajax execute, give it a background image loader.gif and remove it when ajax task completes, like;

 $.get(
    $("#loader").css({ 'background-image':'url(images/loader.gif)' });
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
        $("#loader").css({ 'background-image':'url()' });
    },
    'html'
);

I have not tested it myself.. Hope this helps..

回复收藏 0 原文

成熟的代价 2024-11-23 08:27:56

我通常会这样做：

$("#indicatordiv").show();
$.post("somepage", function(result){ 
    $("#indicatordiv").hide();
})

其中“indicatordiv”是一个包含加载器 gif 图像的简单 div 元素。

因此，在您的情况下，只需“.show()”获取请求之前的元素，并在响应函数中“.hide()”它。

I normally do something like this:

$("#indicatordiv").show();
$.post("somepage", function(result){ 
    $("#indicatordiv").hide();
})

Where "indicatordiv" is a simple div element containing the loader gif image.

So in your case, just ".show()" the element before the get request, and ".hide()" it inside the response function.

回复收藏 0 原文

梦里兽 2024-11-23 08:27:56

您可以添加一个包含带有加载器图像的图像标签的 div。最初隐藏 div。在调用ajax请求之前显示div。从ajax请求获取数据后隐藏div。

$("#dvLoader").show();
$.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
    success:
         function(data)
         {
            $("#dvLoader").hide();
         }

);

dvLoader 包含加载程序映像。

you can add a div which contains an image tag with loader image. Initially hide the div. Before calling the ajax request show the div. and after getting data from ajax request hide the div.

$("#dvLoader").show();
$.get(
    'GetPage.aspx',
    'url=' + url ,
    function (response) {
        if (!cancelNavigationFlag)
            setIframeHtml(response);
        cancelNavigationFlag = false;
    },
    'html'
    success:
         function(data)
         {
            $("#dvLoader").hide();
         }

);

dvLoader contains an the loader image.

回复收藏 0 原文

~没有更多了~