0

これを使用して、ローディングスピナーをアクティブにします。

アラートを削除するとすぐに失敗します（divの読み込みgifは非表示になりません）：

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    $("#filtersLoad").show(); //  Show loading gif in div
    $container.isotope({
        filter: selector
    });
    alert("foo");
    if ($container.data('isotope').$filteredAtoms.length) {
        $("#filtersLoad").hide(); // Hide same div when filter and layout completes.
    }
    return false;
});

かなり馬鹿げた何かだと思います！他のアプローチにもオープンです。

ご協力いただきありがとうございます！

ローダーのHTML：

$("#filtersLoad, #postLoad").html('<img style=\"float:left; border:none;\" src=\"../../themes/images/ajax-loader2.gif\" width=\"54\" height=\"55\">');
});

最新のリビジョンこれは機能しますが、きれいではありません。Joshのコードは私に良いスタートを与えましたが、同じボタンが連続してクリックされた場合にローダーを停止する何かが必要でした（以下のコメントを参照）。

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');
    var lastClicked = $("#filtersLoad2").text();


if(lastClicked == selector) {

   return false;    

} 

   $container.isotope({
        filter: selector,
        onLayout: $("#filtersLoad").show() //  Show loading gif in div
    }, function(){
        $("#filtersLoad").hide();
        $("#filtersLoad2").text(selector);
    });

    return false;
});

ここで必要だったので、値をdivに入れましたlastClicked。さらに、後で使用することもできます。そして、Isotopeを使用しonLayoutて読み込み中のdivを表示します。

4

2 に答える 2

1

IsotopeのWebサイトによると、2番目のパラメーターとしてコールバック関数を指定できます。これは、アニメーションの終了後に起動します。このコールバックでは、読み込み中の画像を非表示にする必要があります。それをチェックしてください：

var currentFilter = '';

$('#filters a').click(function() {
    var selector = $(this).attr('data-filter');

    if (selector === currentFilter){
        return false;
    }
    currentFilter = selector;

    $("#filtersLoad").show(); //  Show loading gif in div
    $container.isotope({
        filter: selector
    }, function(){
        $("#filtersLoad").hide();
    });

    return false;
});
于 2012-07-11T17:20:25.790 に答える
0

フィルタとレイアウトが完了したら、同じdivを非表示にします。

何かが足りないかもしれませんが、単一のifステートメントはレイアウトが完了するのをどのように待機しますか？私が見ているように、あなたは、私の知る限り、非同期であるあなたを示し、isotop次に非表示にするので、それは決して表示されません。

于 2012-07-11T17:07:36.470 に答える