использовать jjery-методы ajaxStart и ajaxStop только для некоторых запросов

Question

Я использую jjery-методы AjaxStart и AjaxStop для показа и скрытия сообщения о загрузке при отправке запроса через Ajax.как следующий код:

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