Question

使用它来激活加载微调器。

一旦删除警报，

失败（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;
});

我将lastClicked值放在div中，因为我在这里需要它，以后可能也会使用它。而且，现在使用Isotope的onLayout来显示加载div。

Answer 1

根据Isotope website，您可以将回调函数指定为第二个参数，该参数将在动画结束后触发。您将要在此回调中隐藏加载图像。检查一下：

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

Answer 2

过滤器和布局完成时隐藏相同的div。

也许我错过了一些东西，但是如何用单个if语句等待来完成布局？正如我所看到的那样，你表明，你isotop我知道的是异步，然后隐藏，所以它永远不会显示。

除非函数中有警报，否则无法隐藏div

2 个答案: