0

私はアイテムの長いリストでウェブサイトを作ろうとしてきました。ユーザーエクスペリエンスを向上させるために、すべてのアイテムを一度にロードするのではなく、いくつかの部分に分けて、本当に必要なものだけをロードするために、このリストが必要です。

以下のコードで、私はそれを機能させることができました。一度に5つのオブジェクトの小さなバッチでデータをロードします。次のバッチは、ユーザーが[もっと見る]ボタンをクリックした場合にのみダウンロードされ、遅延アイテムがいくつかある限り、ボタンは表示されます。

それは機能しますが、大画面のクラシッククライアントではメカニズム全体が必要ないため、この関数を一部の画面サイズ（たとえば幅<480px）でのみ機能させるようにしてください。

また、読み込み時にリストをアニメーション化して、読み込み時にスムーズに表示することもできます。

<script>
$('.list li:gt(4)').hide();
$('.show_button').click(function() {
$('.list li:hidden:lt(5)').show();
if( ! $('.list li').is(':hidden') )
$(this).hide();
return false;
});
</script>

jsfiddleリンク

この問題に関する迅速な支援に感謝し、期待しています。

4

1 に答える 1

0

これにbashを与えます：

function checkWindowSize() {
    var pageWidth = $(window).width();  
    if (pageWidth <= 480) {
        $('.show_button').show();
        $('.list li:gt(4)').hide();
        $('.show_button').click(function() {
            $('.list li:hidden:lt(5)').show();
            if(!$('.list li').is(':hidden'))
                $(this).hide();
            return false;
        });
    } else {
        $('.show_button').hide();
    }
}

$(document).ready(function() {
    $('.show_button').hide();
    checkWindowSize();
    $(window).resize(checkWindowSize);  
});
于 2013-03-18T12:02:01.497 に答える