jQuery使用分页进行过滤，是否可以不加载隐藏元素？

我正在使用这个jquery解决方案来过滤我的内容（以及jpages和lazyload）——

它工作得很好，但我注意到当有超过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();
}); 
});

---

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

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

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

---

这是最后的代码，但不幸的是它破坏了过滤器功能。我以前没有清除缓存：(

$（函数（）{
$（'div:hidden'）.remove（）；
var container=$（“#itemListLeading”），
分页=$（“#分页”）；
函数setLazyLoad（）{
container.find（“img”）.lazyload({
事件：“翻页”，
效果：“法丹”
});
};
函数设置分页（）{
pagination.jPages({
containerID:“itemListLeading”，
每页：9，
方向：“自动”，
动画：“法德努普”，
上一个：“a.jprev”，
下一步：“a.jnext”，
回调：函数（页、项）{
项目。显示。查找（“img”）。触发器（“翻页”）；
项目。迎面而来。查找（“img”）。触发器（“翻页”）；
}
});
};
函数分页（）{
分页.jPages（“销毁”）；
};
setLazyLoad（）；
设置分页（）；
var ft=$.filtery（“itemListLeading”，“占位符”{
close:true，//选择标记后关闭窗口
块：“原始数据”，
回调：函数（查询、匹配、不匹配）{
if（mismatch.length）$（“div#reset”）.show（）；//show reset
else$（“div#reset”）.hide（）；
$（'.ft label'）.parent（）//隐藏不相关的标记
.find（'li[data count=0]”）。hide（）.end（）
.find（':not（li[data count=0]））.show（）.end（）；
$（“.ft选定li”）.css（“显示”、“内联块”）；//小标记显示修复
销毁分页（）；
设置分页（）；
}
});
$（“div#reset span”）。单击（函数（）{//使重置按钮可单击
ft.reset（）；
}); 

}))

---

不幸的是，这不起作用：（在“}”之前的最后一行中，“…”也有一个错误，“…”意味着将其余的代码放在这里…所以我告诉您只需添加到函数

$（'div:hidden'）。remove（）；

行…抱歉，我没有得到：）看起来这段代码有帮助，页面加载速度似乎快了很多。非常感谢。

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