Не могу понять, когда скрывать и показывать загрузочную анимацию с помощью JQuery - PullRequest
Новая
       20

Не могу понять, когда скрывать и показывать загрузочную анимацию с помощью JQuery

1 голос
/ 28 мая 2011

У меня есть анимация загрузки, которую я изначально скрываю в своем файле application.js: 

$('#loading_field').hide();

У меня есть поле автозаполнения, и я хочу, чтобы анимация появлялась, когда пользователь начинает печатать, иисчезать при появлении результатов подсказки автозаполнения.Ниже приведен мой код jquery для плагина автозаполнения jquery ui: 

$(".showable_field").autocomplete({
    minLength: 1,
    source: '/followers.json',
    focus: function(event, ui) {
       $('.showable_field').val(ui.item.user.name);
       return false;
    },
    select: function(event, ui) {
        var video_id = $('#video_id_field').val();
        var user_id = ui.item.user.id;
        $.post("/showable_videos.js", {video: video_id, user: user_id});
        $(':input','#new_showable_video').not(':button, :submit, :reset, :hidden').val('');
        return false;
    }
});
var obj = $(".showable_field").data('autocomplete');
obj && (obj._renderItem = function( ul, item ) {
    return $( "<li></li>" )
       .data( "item.autocomplete", item )
       .append( "<a>" + item.user.name + "</a>" )
       .appendTo( ul );
});

Где мне показать и скрыть анимацию?

Ответы [ 2 ]

4 голосов
/ 28 мая 2011

Хорошо, пользовательский интерфейс jQuery автоматически добавляет класс 'ui-autocomplete-loading' к вашему вводу при загрузке удаленных данных, поэтому самый простой способ сделать это - просто вставить анимированный GIF в качестве фонового изображения на вашем компьютере. ввод, когда этот класс присутствует.

Это то, что они делают в примере с удаленной загрузкой на jQueryUI.com (обратите внимание, что для запуска вызова ajax в этом примере вам нужно ввести еще два символа). 

<style>
  .ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
</style>
2 голосов
/ 28 мая 2011

Поскольку вы используете AJAX для загрузки предложений, я думаю, что это должно работать для вас: 

$('#loading_field').ajaxStart(function () {
  $(this).show();
}).ajaxStop(function () {
  $(this).hide();
});
...