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

【问题标题】：How can I show a spinner while loading images from Flickr?从 Flickr 加载图像时如何显示微调器？
【发布时间】：2009-01-12 03:12:52
【问题描述】：

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

【问题讨论】：

标签： jquery ajax flickr

【解决方案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 的东西，默认情况下是隐藏的。

【讨论】：

我找到了 'api_callback' 和 'callback' 属性。您能否详细说明我如何在回调后使用它们隐藏？我对使用 javascript 和 jquery 比较陌生。谢谢

【解决方案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(" ");
    }); 
});

【讨论】：

【解决方案3】：

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

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

和

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

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

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

【讨论】：