3

デフォルトで 6 つの div 要素がページに表示され、ユーザーがページの一番下までスクロールすると、さらに 6 つの要素が読み込まれるようにするにはどうすればよいですか?

この例を見ると、複数の div があります。最初に表示されるのは 6 つだけで、ユーザーがページの一番下に到達するたびに、div が「なくなる」まで、さらに 6 つをロードする必要があります。

これまでのところ、jQuery の無限スクロール プラグインを試してみましたが、実際には要素の数が非常に限られているため、私の場合は適用できません!

jQueryを使用してこれをどのように達成できますか? 前もって感謝します！

編集

残りの div を (最初の 6 つを除いて) 非表示に設定し、ページの下部に到達したときにさらに 6 つをロードする関数をトリガーできると思います。

4

4 に答える 4

11

私は非常に簡単な例を作成しましたが、最適化されていません。

http://jsfiddle.net/gRzPF/2/

于 2012-04-05T22:13:25.107 に答える
1

document.createElement("div")または同様のものでそれぞれ初期化された div の配列があると仮定しましょう。それらの大きな配列があると仮定しましょう。

var myArrayOfDivs = [];//see above
var DivsAdded = 6;//as stated, 6 were already added - index 6 is the 7th element
$(window).scroll(function () {
    if ($(window).scrollTop() == $(document).height() - $(window).height()) {
        for(int i = 0; i < 6; i++){
         if( myArrayOfDivs.length < DivsAdded ) break;
         $("#elementToAppendIn").append(myArrayOfDivs[DivsAdded++]);
        }
    }
});
于 2012-04-05T22:21:25.330 に答える
1

次のようなものを使用できるはずです。

jQuery( window ).scroll( function( ) {
    var loadHeight = jQuery( document ).height( ) - jQuery( window ).height( );
    if( haveDivsToLoad && jQuery( window ).scrollTop( ) >= loadHeight ) {
        // fire your load function here
    }
} );

loadHeight満足のいくように機能させるには、遊んでみる必要があるかもしれません。

編集：haveDivsToLoadチェックに追加しました。これをグローバル (またはクロージャー) 変数にして、ロードする sが他にあるかどうかに応じてtrueorに設定する必要があります。falsediv

于 2012-04-05T22:03:04.480 に答える
0

少し実験した後、私は完璧な答えを見つけました：

http://jsfiddle.net/jackdent/gRzPF/12/

于 2012-04-07T13:01:15.267 に答える