3

Вопрос по css, html, jquery, javascript – jQuery прокрутка показать скрытый контент

Как сделать так, чтобы по умолчанию на странице отображалось 6 элементов div, а когда пользователь прокручивает страницу вниз, загружаются еще шесть элементов?

Если вы видите этопример, он имеет несколько делений. Я хочу, чтобы изначально отображалось только 6 из них, и каждый раз, когда пользователь достигает нижней части страницы, я хочу, чтобы еще шесть загружались до тех пор, пока вы не закончите. див.

До сих пор я пробовал экспериментировать с плагинами бесконечной прокрутки jQuery, но они не применимы в моем случае, так как на самом деле количество элементов у меня очень ограничено!

Как это можно сделать с помощью jQuery? Заранее спасибо!

EDIT

Я полагаю, что можно установить оставшиеся элементы div скрытыми (кроме первых 6) и вызвать функцию, которая загружает еще шесть при достижении нижней части страницы.

  • Вы должны сделать именно это. Инициировать событие, когда пользователь достиг дна, и в этом событии загружаются следующие div.

    от Johannes Klauß
  • 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 к чеку. Вы должны сделать это глобальной (или закрытой) переменной и установить ее вtrue или жеfalse в зависимости от того, есть ли ещеdivs для загрузки.

  • 0

    После нескольких экспериментов я нашел идеальный ответ:

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

  • 1

    Предположим

    у вас есть массив элементов div, каждый из которых инициализируетсяdocument.createElement("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++]);
            }
        }
    });
    

  • 11

    Я создал очень быстрый пример, он не оптимизирован, выполняя работу:

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