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/

第二次 - 在您的图片目录中保存微调器 - ./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(" ");
    }); 
});

Answer 3

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

包装函数

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

和

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

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

问题是，如果它不是异步的，你会对超时做些什么？刷新按钮可以永久隐藏。您可以考虑设置一个计时器，以确保向用户显示一个可用的状态（如果您想要获得一种幻想，则表示该脚本似乎已超时）。

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

3 个答案: