Question

我正在使用此jquery解决方案来过滤我的内容（以及jpages和lazyload） - http://luis-almeida.github.io/filtrify/jpages.html

它的效果非常好，但是当有超过50个元素时，我注意到了一些减速。页面加载后，过滤器本身运行速度很快，但页面加载时间过长。

我想知道是否有办法防止加载元素（在这种情况下为div），而不仅仅是不可见的图像？

这可以通过jquery来实现吗？

最终密码我正在使用

$(function() {

var container = $("#itemListLeading"),
    pagination = $("#pagination");

function setLazyLoad () {
    container.find("img").lazyload({
        event : "turnPage",
        effect : "fadeIn"
    });
};

function setPagination () {
    pagination.jPages({
        containerID : "itemListLeading",
        perPage : 9,
        direction : "auto",
        animation : "fadeInUp",
        previous  : "a.jprev",
        next      : "a.jnext",
        callback : function( pages, items ){
            items.showing.find("img").trigger("turnPage");
            items.oncoming.find("img").trigger("turnPage");
        }
    });
};

function destroyPagination () {
    pagination.jPages("destroy");
};

setLazyLoad();
setPagination();    

var ft = $.filtrify("itemListLeading", "placeHolder", {
    close: true, // Close windows after tag select
    block : "data-original",
    callback: function ( query, match, mismatch ) {

        if ( mismatch.length ) $("div#reset").show(); // Show Reset
        else $("div#reset").hide();

        $('.ft-label').parent() // Hide unrelated tags
            .find('li[data-count=0]').hide().end()
            .find(':not(li[data-count=0])').show().end();

        $(".ft-selected li").css("display","inline-block"); // small tag display fix

        destroyPagination();
        setPagination();

    }
});

$("div#reset span").click(function() { // Make reset button clickable
    ft.reset();
}); 
});

Answer 1

尝试一下，不确定它是否适用于您的情况：

$(function() {
  $('div:hidden').remove();

  var container = $("#itemListLeading"),
  ...
});

Answer 2

这是最终的代码，但不幸的是它打破了过滤器功能。我之前没有清除我的缓存:(

<script type="text/javascript">
$(function() {
$('div:hidden').remove();

var container = $("#itemListLeading"),
    pagination = $("#pagination");

function setLazyLoad () {
    container.find("img").lazyload({
        event : "turnPage",
        effect : "fadeIn"
    });
};

function setPagination () {
    pagination.jPages({
        containerID : "itemListLeading",
        perPage : 9,
        direction : "auto",
        animation : "fadeInUp",
        previous  : "a.jprev",
        next      : "a.jnext",
        callback : function( pages, items ){
            items.showing.find("img").trigger("turnPage");
            items.oncoming.find("img").trigger("turnPage");
        }
    });
};

function destroyPagination () {
    pagination.jPages("destroy");
};

setLazyLoad();
setPagination();    

var ft = $.filtrify("itemListLeading", "placeHolder", {
    close: true, // Close windows after tag select
    block : "data-original",
    callback: function ( query, match, mismatch ) {

        if ( mismatch.length ) $("div#reset").show(); // Show Reset
        else $("div#reset").hide();

        $('.ft-label').parent() // Hide unrelated tags
            .find('li[data-count=0]').hide().end()
            .find(':not(li[data-count=0])').show().end();

        $(".ft-selected li").css("display","inline-block"); // small tag display fix

        destroyPagination();
        setPagination();

    }
});

$("div#reset span").click(function() { // Make reset button clickable
    ft.reset();
});

}）;

jQuery用分页过滤，是否有可能不加载隐藏的元素？

2 个答案: