仅对某些请求使用 ajaxStart 和 ajaxStop jquery 方法

Question

当请求通过 Ajax 发送时，我使用 AjaxStart 和 AjaxStop jquery 方法来显示和隐藏加载消息。像下面的代码：

                $('<div><img src="images/searching.gif" align="absmiddle" border="0" />Please Wait ...</div>')
            .attr('id','loading')
            .appendTo('body')
                .ajaxStart(function() { 
                  $(this).animate({
                        top     : '40px',
                        opacity : 1.0
                   }, 500);
                })
                .ajaxStop( function(){ 
                  $(this).animate({
                       top     : '-75px',
                       opacity : 0.1
                   }, 500);
                });

但我不希望所有请求都显示此加载，而只显示某些特定请求。 你有解决问题的办法吗？

Answer 1

分离代码行以创建加载器图像并绑定 ajax 事件

区分需要 ajaxStop/ajaxStart 事件的图像和不需要的图像。使用 CSS 类来区分图像。

为 ajax 事件创建加载器图像：

对于 ajax：

$('<div><img src="images/searching.gif" align="absmiddle" border="0" />Please Wait ...</div>').attr('id','loading').attr('css','ajax-img').appendTo('body')

不需要ajax：

$('<div><img src="images/searching.gif" align="absmiddle" border="0" />Please Wait ...</div>').attr('id','loading').appendTo('body')

将您的 ajaxStop 和 ajaxStart 事件绑定到具有“ajax-img”类的图像

$('img.ajax-img').ajaxStart(function() { 
                  $(this).animate({
                        top     : '40px',
                        opacity : 1.0
                   }, 500);
                })
                .ajaxStop( function(){ 
                  $(this).animate({
                       top     : '-75px',
                       opacity : 0.1
                   }, 500);
                });