如何在从Flickr加载图像时显示微调器？

I'm using jquery.flickr-1.0.js to search flickr for images in my application. The problem i'm facing is that sometimes it takes a few seconds for flickr to respond with results and i want to load a spinning gif in place of my search button 'btnRefresh' until the results are returned. How can I accomplish this?

我正在使用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")
        });
    }); 
});

3 个解决方案

#1

the flickr plugin supports a callback property in its options. So, you could just display the spinner before calling flickr and then in the callback hide it.

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

That ought to do it... assuming you have something in your page called spinner that is by default hidden.

应该这样做...假设您的页面中有一些名为spinner的内容,默认情况下是隐藏的。

#2

First - Go here and create a spinning gif or png - http://ajaxload.info/

首先 - 去这里创建一个旋转的gif或png - http://ajaxload.info/

Second - Save the spinner in your images dir - ./images/ajax-loader.gif

第二步 - 保存图像中的微调器目录 - ./images/ajax-loader.gif

Third - add one div to your html where the spinner will be located on the page, let's say

第三 - 在你的html中添加一个div,其中微调器将位于页面上,让我们说

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

Fourth - Add two lines to your existing code.

第四 - 在现有代码中添加两行。

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

#3

I'm not familiar with the flickr() method you reference above, but generally the approach to these sorts of things is that you show the gif before you make the call and then hide it when the call completes. It does not look like the code above is asynchronous, so my approach would be to put a gif next to the btnRefresh with an id of 'imgLoading'. Make the first line something like $('imgRefresh').hide(); In your click handler, wrap the function in with

我不熟悉你在上面引用的flickr()方法,但通常这种方法的方法是你在打电话之前显示gif然后在调用完成时隐藏它。看起来上面的代码看起来不是异步的,所以我的方法是在btnRefresh旁边放一个带有'imgLoading'id的gif。让第一行像$('imgRefresh')。hide();在您的单击处理程序中,将函数包装在中

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

and

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

It's not the most sophisticated approach, but you know... keep it simple and that sort of stuff.

这不是最复杂的方法,但你知道......保持简单和那种东西。

The problem will be, if it's not asynchronous, what do you do for timeouts? The refresh button could be forever hidden. You might consider setting a timer to ensure that a useable state is presented to the user (and if you want to get fancy, a msg saying that the script appears to be timing out).

问题是,如果它不是异步的,你会对超时做些什么?刷新按钮可以永久隐藏。您可以考虑设置一个计时器,以确保向用户显示一个可用的状态(如果您想获得一个幻想,一个msg说该脚本似乎超时)。

#1