Как показать загрузочный счетчик в jQuery?

Question

In Prototype Я могу показать изображение "loading ..." с этим кодом:

var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, 
onLoading: showLoad, onComplete: showResponse} );

function showLoad () {
    ...
}

В jQuery я могу загрузить страницу сервера в элемент следующим образом:

$('#message').load('index.php?pg=ajaxFlashcard');

но как мне добавить к этой команде загрузочный счетчик, как я это делал в Prototype?

Answer 1

Я делаю это:

var preloaderdiv = '<div class="thumbs_preloader">Loading...</div>';
           $('#detail_thumbnails').html(preloaderdiv);
             $.ajax({
                        async:true,
                        url:'./Ajaxification/getRandomUser?top='+ $(sender).css('top') +'&lef='+ $(sender).css('left'),
                        success:function(data){
                            $('#detail_thumbnails').html(data);
                        }
             });

Answer 2

Если вы не хотите писать свой собственный код, есть также множество плагинов, которые делают именно это:

• https://github.com/keithhackbarth/jquery-loading
• http://plugins.jquery.com/project/loading

Answer 3

Я думаю, что вы правы. Этот метод слишком глобален ...

Однако - это хороший вариант по умолчанию, когда ваш вызов AJAX не влияет на саму страницу. (фон сохранить, например). (вы всегда можете отключить его для определенного вызова ajax, передав «global»: false - см. документацию по jquery

Когда вызов AJAX предназначен для обновления части страницы, мне нравится, когда мои «загружаемые» изображения относятся к обновленному разделу. Я хотел бы увидеть, какая часть обновляется.

Представьте, как было бы здорово, если бы вы могли просто написать что-то вроде:

$("#component_to_refresh").ajax( { ... } ); 

И это покажет «загрузку» в этом разделе. Ниже приведена функция, которую я написал, которая также обрабатывает отображение «загрузки», но она относится к области, которую вы обновляете в ajax.

Во-первых, позвольте мне показать вам, как его использовать

<!-- assume you have this HTML and you would like to refresh 
      it / load the content with ajax -->

<span id="email" name="name" class="ajax-loading">
</span>

<!-- then you have the following javascript --> 

$(document).ready(function(){
     $("#email").ajax({'url':"/my/url", load:true, global:false});
 })

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

jQuery.fn.ajax = function(options)
{
    var $this = $(this);
    debugger;
    function invokeFunc(func, arguments)
    {
        if ( typeof(func) == "function")
        {
            func( arguments ) ;
        }
    }

    function _think( obj, think )
    {
        if ( think )
        {
            obj.html('<div class="loading" style="background: url(/public/images/loading_1.gif) no-repeat; display:inline-block; width:70px; height:30px; padding-left:25px;"> Loading ... </div>');
        }
        else
        {
            obj.find(".loading").hide();
        }
    }

    function makeMeThink( think )
    {
        if ( $this.is(".ajax-loading") )
        {
            _think($this,think);
        }
        else
        {
            _think($this, think);
        }
    }

    options = $.extend({}, options); // make options not null - ridiculous, but still.
    // read more about ajax events
    var newoptions = $.extend({
        beforeSend: function()
        {
            invokeFunc(options.beforeSend, null);
            makeMeThink(true);
        },

        complete: function()
        {
            invokeFunc(options.complete);
            makeMeThink(false);
        },
        success:function(result)
        {
            invokeFunc(options.success);
            if ( options.load )
            {
                $this.html(result);
            }
        }

    }, options);

    $.ajax(newoptions);
};

Answer 4

Вы всегда можете использовать Block UI jQuery-плагин , который сделает все за вас и даже заблокирует страницу любого ввода во время загрузки ajax. Если плагин, кажется, не работает, вы можете прочитать о правильном способе его использования в этом ответе. Проверьте его.