Реализация бесконечной прокрутки с помощью jquery

Я работаю над проектом, который используетJQuery Masonry а такжеБесконечная прокрутка плагины для загрузки "n" количество картинок из инстаграм с использованием их API. Глядя на этот короткийпример я понимаю, что мне нужно иметь перед собой HTML-страницы, которые будут отображаться:

<nav id="page-nav">
  <a href="pages/2.html"></a>
</nav>

Проблема в том, что я не знаю, сколько фотографий будет найдено. Вот, например, как я получаю 20 фото одновременно.

    $(document).ready(function(){       
        var access_token = location.hash.split('=')[1];

        if (location.hash) {

              $.ajax({
            type: "GET",
            dataType: "jsonp",
            cache: false,
            url: "https://api.instagram.com/v1/users/MY_USER_ID/media/recent/?access_token=MY_ACCESS_TOKEN",
            success: function(data) {

                for (var i = 0; i < 20; i++) {
            $("#instafeed").append("<div class='instaframe'><a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.standard_resolution.url +"' /></a></div>");   
                }     

            }
        });


        } else {
        location.href="https://instagram.com/oauth/authorize/?display=touch&client_id=MY_CLIENT_ID&redirect_uri=MY_URI"; 

        }

    });

Я предполагаю, что мне понадобится механизм разбиения на страницы, но на основе упомянутого выше учебника я считаю, что сначала мне нужно будет предварительно определить HTML-страницы для загрузки. Так что теперь здесь мои вопросы

Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files in a directory to achieve infinite scrolling? Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files? How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?

С наилучшими пожеланиями

Ответы на вопрос(2)

Решение Вопроса

1) Does that mean this plugin (Infinite Scroll) requires to have "n" amount of html files

Точно нет. Вам не нужно заранее генерировать статические html-страницы. Единственное, что вам нужно, - это схема URL, в которой содержимое следующей страницы можно получить, изменив одно число в URL.

Подумайте об этом с точки зрения плагина бесконечной прокрутки. Вы загружаете плагин JavaScript на своей странице № 1 и предоставляете ссылку на страницу № 2 внутри страницы № 1. Теперь, когда пользователь прокручивает страницу # 1, единственной переменной, которую имеет плагин, является номер текущей страницы, например, 2, или 3, или 4 (N)

Плагину необходимо создать URL-адрес для извлечения контента, когда пользователь выполняет прокрутку. Так как же плагин это делает? Плагин просматривает следующую структуру URL, представленную на странице # 1, анализирует ее и создает «базовый путь». к которому он будет продолжать добавлять current_page_number для извлечения последующего контента. Это роль селектора NAV.

Итак, скажем, у меня есть что-то вроде/home/page/2 как следующий URL на странице # 1. Плагин будет анализировать это в массив как

[/home/page/,2]

и думаю, что base_path ="/home/page/"

когда плагин пытается извлечь номер_страницы 3, он просто добавляет 3 к базовому пути, как base_path.join (current_page_num), делая его/home/page/3

На стороне сервера у меня может быть контроллер, который заботится обо всех ссылках с / home / page / 1 на / home / page / N. Вы можете просто заглянуть внутрь плагина, найти _determinePath и получить функции.

Теперь вы также можете увидеть проблему. Проблема в том, что может быть бесконечное разнообразие структуры URL в зависимости от того, как вы делаете нумерацию страниц внутри своего кода и сколько переменных вам нужно. Мой способ разбивки на страницы отличается от вашего способа разбивки на страницы. То же самое касается рамок. Схема пагинации в Drupal может отличаться от Djanga, WordPress и т. Д.

Плагин не может справиться со всеми этими структурами URL. Учитывая следующий URL, невозможно всегда определить «базовый путь» к которому нужно добавить current_page_number. Снова посмотрите на метод плагина _determinePath (), чтобы увидеть, с каким URL он может справиться. Он может анализировать простые структуры URL, такие как page2.html или page = 2, но вы должны предоставить собственную реализацию, если ваша структура URL сложная или что-то, что плагин не может обработать. Посмотрите также на метод pathParse ().

2)Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have.

Опять же, нет необходимости создавать HTML-файлы. У вас есть два варианта, чтобы указать конец содержимого (не зная, сколько фотографий у вас есть заранее)

When you have reached the "no content condition" you can return an HTTP 404. Or you can return an empty string.

Это отвечает на вопрос?

Как это может работать с плагином

First page - include - NAV SELECTOR - LOAD THNIGS THE USUAL WAY First page on load - use instagram pagination and store "nextURL" in your javascript somewhere On Scroll - override _determinePath to provide your own fetch URL using (2) - let plugin retrieve that URL Override plugin content selector - so it returns new elements to callback On Plugin fetch content - Use the callback inside plugin to update your page Update on github repo

Я разбудил github repo Пола, чтобы добавить документацию для интеграции с PHP-сервером. Я полагаю, что допущение плагина о том, что следующий URL зависит только от номера текущей страницы, является слишком ограничительным. Нам нужно получить nextURL из контента следующей страницы.

Github Repo -https://github.com/rjha/infinite-scroll

Вытащить заявку на базовый репо -https://github.com/paulirish/infinite-scroll/pull/219

Мои знания javascript очень ограничены, и, возможно, вы сможете лучше расширить базовый плагин. Однако каждая капля помогает сделать океан :)

 Bartzilla24 июл. 2012 г., 19:59
спасибо, я думаю, теперь у меня есть более четкое представление о том, как поступить!
 13 мар. 2013 г., 16:54
@ rjha94 прекрасное объяснение
 Bartzilla24 июл. 2012 г., 15:41
@ rjha94 для меня теперь это имеет больше смысла ... однако у меня все еще есть некоторые сомнения, как это реализовать. Не могли бы вы привести краткий пример кода о том, как выполнить загрузку новых фотографий?
 24 июл. 2012 г., 18:55
это должно быть выполнимо, если вы хотите переопределить разбор пути + селектор контента + обеспечить обратный вызов контента. Я не думаю, что вы будете использовать что-то кроме "прокрутки" часть из этого плагина. Я обновил свой ответ, включив в него "схемы" Однако это не выглядит стоит. Как быстрое решение, вам лучше скопировать "огонь на прокручиваемую часть" от плагина и обеспечьте себе отдых Здесь я жую свои собственные слова (никогда не пишу на скорую руку) и хочу сказать, что @Bergi был прав насчет & quot; вашего варианта использования и этого плагина & quot;

n" amount of html files in a directory to achieve infinite scrolling?

Да,этот конкретный плагин Похоже, что он предназначен для поддержки только статических страниц, которые в противном случае использовали бы & quot; Следующая страница & quot; ссылка на сайт.учебник вы нашли даже заявляет, что не может обрабатывать динамически генерируемый контент с URL-параметрами, хотя я в это не верю.

Is it possible to implement infinite scrolling with the same plugin if I dont know how many pages I will have. Even better without even having to create physical html files?

По дизайну этого плагина я бы сказалNo, Конечно, вы должны иметь возможность использовать (неизвестное) количество динамически генерируемых страниц с изображениями. Для этого нужно, чтобы серверный код подавался из API Instagram, что, похоже, не то, что вам нужно.

How can this kind of pagination is implemented? (i.e loading chunks of 20 pics as long as the user keeps scrolling down) there is not that much documentation online, could you provide a short step through demo or description?

Есть и другие плагины с бесконечной прокруткой. Демки 2 и 5 на этомсайт, который вы нашли реализовать простой "родной" (то есть, без плагина) бесконечная прокрутка, обе загружают новый контент через ajax. Демо 3 и 4 используютплагин бесконечной прокрутки с несколькимибольше вариантов прокрутки, хотя демоверсии не включают ajax.

Теперь вы можете сами решать, как бы вы хотели реализоватьyour скрипт. Вы, кажется, хотите сначала получить все URL-адреса изображений из Instagram, но добавлять (и, следовательно, загружать файлы изображений) только по частям. Если instagram поддерживает выгружаемый API, вы можете объединить оба процесса загрузки.

Это можно сделать с помощью кода, как в демонстрациях 2–5 - когда прокрутка достигает конца страницы, инициируйте ваши запросы на загрузку изображений. После того, как это произошло, позвонитеКладка & APOS; sappended method на новых элементах img (или instaframe div, как в вашем примере).

 23 июл. 2012 г., 13:53
Нет, но ему, похоже, нужен только один HTML-файл, который бесконечно загружает картинки.
 21 июл. 2012 г., 21:38
нет необходимости создавать физические файлы HTML для использования с плагином бесконечной прокрутки.
 23 июл. 2012 г., 18:33
Это хорошо. Но зачем говорить такие вещи, как «По замыслу этого плагина я бы сказал НЕТ» и & quot; этот конкретный плагин предназначен для поддержки только статических страниц & quot; разве это не так?
 24 июл. 2012 г., 08:08
Я не могу следовать вашим рассуждениям. Даже одна страница может продолжать загружать новые изображения с помощью клиентского JavaScript. Ему просто нужно использовать next_url, возвращаемый API Instagram. проверьте документ здесь: -instagram.com/developer/endpoints
 23 июл. 2012 г., 18:52
"Статическая страница" Я имею в виду только то, что следующие страницы должны быть доступны в виде полных HTML-документов на сервере. Похоже, он не поддерживает создание динамического контента на стороне клиента.

Ваш ответ на вопрос