jQuery: разные ajaxStart и ajaxStop для разных событий

Question

Хорошо, я создал маленькую страницу, где разные элементы вызывают разные вызовы AJAX.

Если бы у меня было только одно загрузочное изображение, я бы хорошо справился с ajaxStart и ajaxStop. Но я хочу, чтобы при загрузке AJAX появлялись разные изображения загрузки.

Что бы работать, конечно, что-то вроде:

$("img#loader").show();

$.ajax({
    complete:function()
    {
        $("img#loader").hide();
    }
});

Но есть ли более элегантный способ сделать это?

Answer 1

Вы можете попытаться сгенерировать изображение ajax динамически и удалить при успешном завершении функции. Ниже приведен пример:

var loader = "<div id='loader'></div>";

вы можете определить определенный стиль для загрузчика идентификатора в вашей таблице стилей или вы можете сразу же предоставить его с помощью jquery. вы можете даже добавить оверлеи, как вам нужно

var panelOverlay= $("<div id='panelOverlay'></div>").css({top:top, left:0,position:fixed, width:"100%", height:"100%", background:'#222', opacity:'.7'});

затем отобразите его перед любыми вызовами ajax: затем загрузить

    $("#somediv").append(loader);
    $("#loader").show();
    $("#loader").fadeIn(400).html('<img align="absmiddle" src="/path/to/image/ajax-loader1.gif" />...Loading'); 

тогда вы делаете ваши ajax звонки

    $.ajax({
        url     :   ""

          ...

`

тогда после успешного завершения функции вы можете удалить загрузочное изображение

        success :function(html){
            if(<your condition>){           

                                   ...
                                   ...
                $("#loader").fadeOut('slow',function(){$("#loader").remove();

Надеюсь, у вас получилось ... загрузить на лету и удалить, когда закончите!