0

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

3 回答 3

5

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

应该这样做...假设您的页面中有一些称为微调器的东西，默认情况下是隐藏的。

于 2009-01-12T03:25:53.883 回答
2

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

第二- 将微调器保存在图像目录中 - ./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(" ");
    }); 
});
于 2009-01-12T03:43:21.133 回答
0

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

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

和

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

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

问题是，如果它不是异步的，你会怎么处理超时？刷新按钮可能永远隐藏。您可能会考虑设置一个计时器以确保向用户呈现可用状态（如果您想花哨的话，一条消息表明脚本似乎正在超时）。

于 2009-01-12T03:22:54.107 回答