0

私はこの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();
}); 
});
4

2 に答える 2

0

あなたの場合に適用できるかどうかわからないので、試してみてください：

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

  var container = $("#itemListLeading"),
  ...
});
于 2013-06-21T09:37:34.943 に答える
0

これは最終的なコードですが、残念ながらフィルター機能が壊れています。前にキャッシュをクリアしませんでした:(

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

});

于 2013-06-25T11:14:18.313 に答える