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

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

---

我不熟悉上面提到的flickr（）方法，但通常这类方法是在调用之前显示gif，然后在调用完成时隐藏gif。上面的代码看起来不是异步的，所以我的方法是在btnRefresh旁边放一个gif，id为“imgLoading”。使第一行类似于$（'imgRefresh'）.hide（）；在单击处理程序中，将函数包装为

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

及

这不是最复杂的方法，但你知道。。。保持简单之类的东西

---

问题是，如果它不是异步的，那么超时怎么办？刷新按钮可能永远隐藏。您可以考虑设置一个定时器，以确保向用户呈现可用的状态（如果您想得到想象，MSG称脚本看起来是超时的）。因此，您可以在调用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的东西，默认情况下是隐藏的。

首先-到这里创建一个旋转的gif或png-

秒-将微调器保存在图像目录中-./images/ajax-loader.gif

第三个-在html中添加一个div，比如微调器将位于页面上的位置

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

jQuery（函数（）{
jQuery（“.btnRefresh”）.livequery（'click'，function（）{
var number=$（this.attr（“id”）；
$（'#gallery_flickr'+number+''）.show（）；
$（“div#spinner”）.html（“”）；
jQuery（'#gallery_flickr'+number+''）.html（“”）.flickr（{
api_密钥：“XXXXXXXXXXXXXXXXX”，
每页：18，
搜索文本：$（'input#flickr_search#+number+''）.val（），
id:$（this.attr（“id”）
});
$（“div#spinner”）.html（“”）；
}); 
});

我找到了“api\U回调”和“回调”属性。你能不能再详细一点，告诉我如何在回调后使用它们来隐藏？我对使用javascript和jquery比较陌生。谢谢

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