Как показать спиннер при загрузке изображений из Flickr?

Question

Я использую jquery.flickr-1.0.js для поиска изображений в моем приложении на flickr. Проблема, с которой я сталкиваюсь, заключается в том, что иногда Flickr требуется несколько секунд, чтобы ответить с результатами, и я хочу загрузить вращающийся GIF вместо моей кнопки поиска 'btnRefresh', пока результаты не будут возвращены. Как мне это сделать?

jQuery(function(){   
    jQuery(".btnRefresh").livequery('click', function(){
        var number = $(this).attr("id");
        $('#gallery_flickr_'+number+'').show();
        jQuery('#gallery_flickr_'+number+'').html("").flickr({      
            api_key: "XXXXXXXXXXXXXXXXXXXX",     
            per_page: 18,
            search_text: $('input#flickr_search_'+number+'').val(),
            id: $(this).attr("id")
        });
    }); 
}); 

Answer 1

плагин flickr поддерживает свойство обратного вызова в своих настройках. Таким образом, вы можете просто отобразить счетчик перед вызовом flickr, а затем в обратном вызове скрыть его.

jQuery(function(){   
    jQuery(".btnRefresh").livequery('click', function(){
        $("#spinner").show();

        var number = $(this).attr("id");
        $('#gallery_flickr_'+number+'').show();
        jQuery('#gallery_flickr_'+number+'').html("").flickr({      
            api_key: "XXXXXXXXXXXXXXXXXXXX",     
            per_page: 18,
            search_text: $('input#flickr_search_'+number+'').val(),
            id: $(this).attr("id"),
            callback: function() {
                $("#spinner").hide();
            }
        });
    }); 
}); 

Это должно быть сделано ... при условии, что на вашей странице есть что-то, называемое spinner, которое по умолчанию скрыто.

Answer 2

Первый - Зайдите сюда и создайте вращающийся GIF или PNG - http://ajaxload.info/

Второй - Сохраните счетчик в ваших изображениях dir - ./images/ajax-loader.gif

Третий - добавьте один div к вашему html, где на странице будет располагаться счетчик, скажем

<div id="spinner"></div>

Четвертый - Добавить две строки в существующий код.

jQuery(function(){   
    jQuery(".btnRefresh").livequery('click', function(){
      var number = $(this).attr("id");
      $('#gallery_flickr_'+number+'').show();
      $("div#spinner").html("<img src='./images/ajax-loader.gif'>");
        jQuery('#gallery_flickr_'+number+'').html("").flickr({      
            api_key: "XXXXXXXXXXXXXXXXXXXX",     
            per_page: 18,
            search_text: $('input#flickr_search_'+number+'').val(),
            id: $(this).attr("id")
        });
      $("div#spinner").html(" ");
    }); 
});

Answer 3

Я не знаком с методом flickr (), на который вы ссылаетесь выше, но обычно такой подход заключается в том, что вы показываете gif перед тем, как сделать вызов, а затем скрываете его после завершения вызова. Не похоже, что приведенный выше код является асинхронным, поэтому мой подход заключается в том, чтобы поместить gif рядом с btnRefresh с идентификатором imgLoading. Сделайте в первой строке что-то вроде $ ('imgRefresh'). Hide (); В вашем обработчике кликов оберните функцию с

$('.imgLoading').show(); $('.btnRefresh').hide();

и

$('.imgRefresh').hide(); $('.btnRefresh').show();

Это не самый сложный подход, но вы знаете ... будьте проще и все такое.

Проблема будет, если она не асинхронная, что вы делаете для тайм-аутов? Кнопка обновления может быть скрыта навсегда. Вы можете подумать о том, чтобы установить таймер, чтобы гарантировать, что пользователю доступно полезное состояние (и если вы хотите стать модным, появится сообщение о том, что сценарий истекает).