0

jquery.flickr-1.0.jsを使用して、アプリケーション内の画像をflickrで検索しています。私が直面している問題は、flickrが結果で応答するのに数秒かかることがあり、結果が返されるまで検索ボタン「btnRefresh」の代わりに回転するgifをロードしたいということです。どうすればこれを達成できますか？

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/

2 番目- スピナーを画像ディレクトリに保存します - ./images/ajax-loader.gif

3 番目- html に 1 つの div を追加して、スピナーがページ上に配置されるようにします。

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

4 番目- 既存のコードに 2 行を追加します。

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 の隣に「imgLoading」の ID を持つ gif を配置することです。最初の行を $('imgRefresh').hide(); のようにします。クリック ハンドラーで、関数を次のようにラップします。

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

と

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

それは最も洗練されたアプローチではありませんが、ご存知のように... シンプルに保ち、そのようなものにしてください。

問題は、非同期でない場合、タイムアウトをどうするかということです。更新ボタンは永久に非表示になる可能性があります。タイマーを設定して、使用可能な状態がユーザーに表示されるようにすることを検討してください (さらに凝りたい場合は、スクリプトがタイムアウトしているように見えるというメッセージを表示します)。

于 2009-01-12T03:22:54.107 に答える