0

我在我的网络应用程序中使用 JQuery 1.8.1。我试图display a loader icon在我的弹出窗口上停留在 div 上，直到 ajax 请求完成。

要显示的图像是already loaded and present (hidden) on the main page。

<img id="myLoader" alt="" src="images/throbber.gif" style="display: none;"/>

单击显示弹出窗口的链接时，我将加载程序图标放在弹出 div 上。当 ajax 请求完成时，div 会被接收到的数据覆盖。

$('a#popup').click(function(event){
        event.preventDefault();
        displayPop();
        $('div#popupdiv').html($('img#myLoader').show());
        $.ajax({
            url: 'someURL',
            type: 'POST',
            data: data,
            dataType: 'json',
            contentType: 'application/json'
        }).success(function(data){
             $('div#popupdiv').html(data);
        });
});

它只工作一次。对于所有其他$('a#popup')呼叫，它是空白的。在从萤火虫调试时，我看到它在第一次调用时返回，但$('img#myLoader')在其余的调用中返回。作为客户端编码的新手，我无法掌握正在发生的事情。Object[img#myLoader images/throbber.gif]Object[]

如何在 ajax 请求完成之前在弹出的 div 上显示加载器图标？我不想对加载器本身使用任何 ajax 请求。请指教。

4

3 回答 3

0

您是否尝试过对链接使用类而不是 ID？

另外，我会移动：

event.preventDefault();

到函数的最后。

于 2013-03-08T08:01:55.137 回答
0

您可以处理两个事件，它们可以完成您的任务

beforeSend: function () {
        loading();
    },

加载时显示加载图像

complete: function () {
     //here you disable that loading image.
    }

更多活动请参考：api.jquery.com/jquery.ajax

于 2013-03-08T07:35:37.390 回答
0

我有同样的问题。问题在于将 jQuery 函数html应用于 jQuery 对象：$('div#popupdiv').html($('img#myLoader')). 之后这个操作对象表现得很奇怪。文档明确说明您只能将html方法与htmlString. 我认为你可以通过使用append来解决你的问题html（这个可以使用jQuery）。我可以建议这样的事情：

var imgLoader = $('img#myLoader').show().remove();

$('a#popup').click(function(event){
    event.preventDefault();
    displayPop();
    $('div#popupdiv').append(imgLoader.clone());
    $.ajax({
        url: 'someURL',
        type: 'POST',
        data: data,
        dataType: 'json',
        contentType: 'application/json'
    }).success(function(data){
         $('div#popupdiv').html(data);
    });

});

于 2013-03-08T08:44:12.537 回答