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

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

4

2 回答 2

1

根据Isotope 网站，您可以将回调函数指定为第二个参数，该函数将在动画完成后触发。您需要在此回调中隐藏加载图像。核实：

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 回答